Theme & environment

Theme Control

Composium supports two theme ownership models.

1. Built-in internal theme state

If you just call ComposiumScreen(), Composium manages its own dark theme state and exposes a built-in toggle in the UI.

@Composable
fun DebugCatalog() {
    ComposiumScreen()
}

2. External theme ownership

If your app already owns theme state, pass it in and keep Composium synchronized with your theme system:

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 oleginvoke.com.composium.ComposiumScreen

@Composable
fun DebugCatalog() {
    var isDarkTheme by remember { mutableStateOf(false) }

    AppTheme(darkTheme = isDarkTheme) {
        ComposiumScreen(
            isDarkTheme = isDarkTheme,
            onThemeChange = { isDarkTheme = it },
        )
    }
}

This mode is useful when:

• your app already has a single source of truth for theme;
• edge-to-edge setup depends on dark mode;
• you want Composium to follow the same theme logic as the rest of the app.

Preview System Controls

Inside a scene, Composium also provides runtime preview controls for environment simulation:

• dark theme;
• display size;
• font size;
• RTL layout.

These controls are useful for quickly checking how a component behaves under different system conditions without leaving the scene browser.

Examples of what you can validate:

• typography overflow with larger font size;
• density-sensitive layouts with different display size multipliers;
• dark theme colors;
• mirrored layout issues in RTL.