Search Docs
Loading...
Skip to content

Theming

In this example, we will show you how to make theming configurations for the mobile editor.

2 mins
estimated time
GitHub

Configuration#

The uiMode setting is passed directly to Editor.

  • uiMode - the UI mode of the editor. The default value is EditorUiMode.SYSTEM. These are the available values:
    • EditorUiMode.SYSTEM - editor will use the light color scheme if the system is in light mode and will use the dark color scheme if the system is in dark mode.
    • EditorUiMode.LIGHT - editor will always use the light color scheme.
    • EditorUiMode.DARK - editor will always use the dark color scheme.

Full Code#

This full sample adds a dock button labeled Switch Theme to toggle between EditorUiMode.LIGHT and EditorUiMode.DARK at runtime.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import ly.img.editor.Editor
import ly.img.editor.EditorUiMode
import ly.img.editor.core.component.Dock
import ly.img.editor.core.component.remember
import ly.img.editor.core.configuration.EditorConfiguration
import ly.img.editor.core.configuration.remember
import ly.img.editor.core.iconpack.IconPack
import ly.img.editor.core.iconpack.Replace


// Add this composable to your NavHost
@Composable
fun ThemingEditorSolution(
    license: String,
    onClose: (Throwable?) -> Unit,
) {
    var uiMode by remember { mutableStateOf(EditorUiMode.LIGHT) }
    Editor(
        license = license, // pass null or empty for evaluation mode with watermark
        uiMode = uiMode,
        configuration = {
            EditorConfiguration.remember {
                dock = {
                    rememberDock(
                        onSwitchClick = {
                            uiMode = if (uiMode == EditorUiMode.LIGHT) {
                                EditorUiMode.DARK
                            } else {
                                EditorUiMode.LIGHT
                            }
                        },
                    )
                }
            }
        },
        onClose = onClose,
    )
}


@Composable
private fun rememberDock(onSwitchClick: () -> Unit) = Dock.remember {
    horizontalArrangement = { Arrangement.Center }
    listBuilder = {
        Dock.ListBuilder.remember {
            add {
                Dock.Button.remember {
                    textString = { "Switch Theme" }
                    vectorIcon = { IconPack.Replace }
                    onClick = { onSwitchClick() }
                }
            }
        }
    }
}