Implementation:Mlc ai Mlc llm Android Theme

Knowledge Sources	Mlc_ai_Mlc_llm
Domains	Android, UI, Theming, Jetpack Compose
Last Updated	2026-02-09 19:00 GMT

Overview

Theme.kt defines the Material3 theming for the MLCChat Android application, providing both light and dark color schemes along with support for Android 12+ dynamic colors.

Description

This file establishes the visual identity of the MLCChat Android application through two color scheme definitions and a composable theme function:

DarkColorScheme is a private darkColorScheme that maps the application's custom color palette (Blue, DarkBlue, Yellow, Red, Grey, BlueGrey variants at different tonal levels) to Material3 semantic color roles such as primary, secondary, tertiary, error, background, surface, and their corresponding on* counterparts.

LightColorScheme is a private lightColorScheme that provides the light-mode equivalents, using lighter tonal values and Color.White for several on* colors.

MLCChatTheme is the main composable theme function. It accepts three parameters:

• darkTheme -- Defaults to the system dark theme setting via isSystemInDarkTheme()
• dynamicColor -- Defaults to true; when enabled and the device runs Android 12+ (API S), it uses dynamicDarkColorScheme or dynamicLightColorScheme
• content -- The composable content to wrap

The function also includes a SideEffect that updates the system status bar color to match colorScheme.primary and adjusts the light/dark appearance of status bar icons. It wraps content in MaterialTheme with the selected color scheme and a custom Typography.

Usage

MLCChatTheme is applied at the top level in MainActivity.onCreate(), wrapping the entire navigation and UI tree. Any composable within the app automatically inherits the color scheme from this theme.

Code Reference

Source Location

• Repository: Mlc_ai_Mlc_llm
• File: android/MLCChat/app/src/main/java/ai/mlc/mlcchat/ui/theme/Theme.kt

Signature

@Composable
fun MLCChatTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
)

Import

import ai.mlc.mlcchat.ui.theme.MLCChatTheme

I/O Contract

Input	Type	Default	Description
darkTheme	Boolean	isSystemInDarkTheme()	Whether to use the dark color scheme
dynamicColor	Boolean	true	Whether to use Android 12+ dynamic colors when available
content	@Composable () -> Unit	(required)	The composable content to be themed

Output / Side Effect	Description
Color scheme applied	Applies DarkColorScheme, LightColorScheme, or a dynamic color scheme to the Material3 MaterialTheme
Status bar color	Sets the window status bar color to colorScheme.primary
Status bar icon style	Adjusts isAppearanceLightStatusBars based on the dark theme flag

Color Role	Dark Scheme	Light Scheme
primary	Blue80	Blue40
secondary	DarkBlue80	DarkBlue40
tertiary	Yellow80	Yellow40
error	Red80	Red40
background	Grey10	Grey99
surface	Grey10	Grey99

Usage Examples

// In MainActivity.onCreate():
setContent {
    Surface(modifier = Modifier.fillMaxSize()) {
        MLCChatTheme {
            NavView(this@MainActivity)
        }
    }
}

// Override dark mode explicitly:
MLCChatTheme(darkTheme = true, dynamicColor = false) {
    // Content with forced dark theme, no dynamic colors
}