Theming and material3

← Back to Compose

Theming and Material 3 Deep Dive

Overview

Compose theming is a design-system contract using color, typography, and shape tokens, commonly powered by Material 3.

Core Concepts

• MaterialTheme token provision
• light/dark mode and dynamic color
• custom design tokens layered on top

Runtime Internals

Theme values are provided through composition locals; changes invalidate consumers that read those tokens.

Composition / Recomposition Flow

• theme provider updates token set
• token consumers are invalidated
• affected UI branches recompose

State Management

Theme selection (user/system) should come from app-level state and be applied at shell/root composition boundary.

Code Examples

MaterialTheme(
    colorScheme = if (isDark) darkColorScheme() else lightColorScheme(),
    typography = AppTypography,
    shapes = AppShapes
) {
    AppContent()
}

Common Interview Questions

• Q: How do you support dynamic color and brand colors together? A: Answer from runtime mechanics: state ownership, recomposition triggers, effect lifecycle, and frame-time impact measured with tooling.
• Q: Where should theme switching state live? A: Answer from runtime mechanics: state ownership, recomposition triggers, effect lifecycle, and frame-time impact measured with tooling.

Production Considerations

• keep token names domain-friendly
• avoid hardcoded colors in feature composables
• verify accessibility contrast and large-text behavior

Performance Insights

Frequent top-level theme toggles can trigger broad recomposition; scope theme changes intentionally.

Senior-Level Insights

Senior-level discussion should include governance of design tokens across teams and avoiding theme drift in large codebases.