Theming

In this example, we will show you how to make theming configurations for the mobile editor. The example is based on the Design Editor, however, it is exactly the same for all the other solutions.

Configuration

Theming configuration is part of the EditorConfiguration class. Use the EditorConfiguration.getDefault helper function to make theming configurations.

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.

import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import ly.img.editor.DesignEditor
import ly.img.editor.EditorConfiguration
import ly.img.editor.EditorUiMode
import ly.img.editor.EngineConfiguration
import ly.img.editor.rememberForDesign

// Add this composable to your NavHost
@Composable
fun ThemingEditorSolution(navController: NavHostController) {
    val engineConfiguration =
        EngineConfiguration.rememberForDesign(
            license = "<your license here>",
        )
    val editorConfiguration =
        EditorConfiguration.rememberForDesign(
            uiMode = EditorUiMode.DARK,
        )
    DesignEditor(
        engineConfiguration = engineConfiguration,
        editorConfiguration = editorConfiguration,
    ) {
        // You can set result here
        navController.popBackStack()
    }
}