Using Multiple Themes in Jetpack Compose Made Simple

Jetpack Compose has revolutionized Android UI development with its declarative approach, offering flexibility and simplicity. One powerful feature of Jetpack Compose is its ability to support multiple themes within a single app. This capability is essential for implementing features like dynamic theming, multi-brand apps, or custom themes for different screens or components.

In this blog post, we’ll explore how to effectively use multiple themes in Jetpack Compose. This guide is designed for intermediate to advanced Android developers who want to master Compose’s theming capabilities. Let’s dive in!

Why Use Multiple Themes?

Using multiple themes in your app provides:

  1. Brand Consistency: Apps with multiple brands can apply unique themes to match their identities.

  2. Dynamic Customization: Allow users to toggle themes dynamically, such as dark mode or seasonal themes.

  3. Component-Specific Styling: Apply custom themes to specific parts of the UI for enhanced visual hierarchy or better UX.

  4. Multi-Product Apps: Different products within the same app can have distinct looks and feels.

Understanding how to implement this feature can elevate the flexibility and user experience of your application.

Core Concepts of Theming in Jetpack Compose

Before implementing multiple themes, it’s essential to understand how theming works in Jetpack Compose:

1. MaterialTheme

At the core of Compose’s theming lies the MaterialTheme. It provides access to three primary attributes:

  • Colors: Define the color scheme of your app.

  • Typography: Control font styles, sizes, and weights.

  • Shapes: Configure the shape of UI components (e.g., rounded corners).

2. Custom Themes

You can create custom themes by wrapping MaterialTheme and providing unique values for colors, typography, and shapes.

3. Composable Scope

Themes in Jetpack Compose are scoped, meaning a theme applies only to the composables within its context. This makes it possible to apply different themes to different parts of your app.

Implementing Multiple Themes

Step 1: Define Multiple Theme Configurations

Start by creating multiple sets of ColorPalette objects for different themes. For example:

import androidx.compose.material.Colors
import androidx.compose.ui.graphics.Color

// Light Theme Colors
val LightColors = Colors(
    primary = Color(0xFF6200EE),
    primaryVariant = Color(0xFF3700B3),
    secondary = Color(0xFF03DAC6),
    background = Color(0xFFFFFFFF),
    surface = Color(0xFFFFFFFF),
    error = Color(0xFFB00020),
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    onError = Color.White,
    isLight = true
)

// Dark Theme Colors
val DarkColors = Colors(
    primary = Color(0xFFBB86FC),
    primaryVariant = Color(0xFF3700B3),
    secondary = Color(0xFF03DAC6),
    background = Color(0xFF121212),
    surface = Color(0xFF121212),
    error = Color(0xFFCF6679),
    onPrimary = Color.Black,
    onSecondary = Color.Black,
    onBackground = Color.White,
    onSurface = Color.White,
    onError = Color.Black,
    isLight = false
)

Step 2: Create Theme Wrappers

Create composable functions that wrap MaterialTheme for each theme. For instance:

@Composable
fun LightTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = LightColors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

@Composable
fun DarkTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = DarkColors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

Step 3: Apply Themes Dynamically

You can apply different themes based on runtime conditions, such as user preferences or device settings. For example:

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    if (darkTheme) {
        DarkTheme(content)
    } else {
        LightTheme(content)
    }
}

This approach allows you to dynamically switch between themes based on a darkTheme flag.

Advanced Use Case: Theming Specific Screens or Components

Sometimes, you need to apply a custom theme to a specific part of the app, such as a single screen or a UI component. Here’s how:

Example: Custom Theme for a Screen

@Composable
fun CustomScreen() {
    DarkTheme {
        // All composables inside this block use the DarkTheme
        Column(modifier = Modifier.fillMaxSize()) {
            Text("This screen uses a custom dark theme!", style = MaterialTheme.typography.h5)
            Button(onClick = {}) {
                Text("Click Me")
            }
        }
    }
}

Example: Theming Individual Components

You can nest themes for individual components:

@Composable
fun ThemedButton() {
    LightTheme {
        Button(onClick = {}) {
            Text("Light Themed Button")
        }
    }
}

Best Practices for Using Multiple Themes

  1. Keep Themes Modular: Define separate composables for each theme to maintain clarity and reusability.

  2. Leverage Dark Theme Defaults: Use the isSystemInDarkTheme() API to respect user preferences.

  3. Avoid Over-Theming: Apply multiple themes only when necessary to prevent complexity.

  4. Test Thoroughly: Ensure that all themes work seamlessly across different devices and configurations.

  5. Document Themes: Maintain clear documentation for each theme’s purpose and usage.

Common Pitfalls and How to Avoid Them

  • Inconsistent Typography and Shapes: Ensure that your custom themes provide consistent Typography and Shapes values alongside Colors.

  • Unnecessary Re-Renders: Wrapping composables in themes unnecessarily can lead to performance overhead. Scope themes appropriately.

  • Ignoring Accessibility: Use contrast-friendly colors and test themes for accessibility compliance.

Conclusion

Using multiple themes in Jetpack Compose empowers you to create dynamic, visually engaging apps that cater to diverse user needs. Whether you’re building a multi-brand app, implementing dark mode, or styling specific components, Jetpack Compose’s theming system provides the flexibility to achieve your design goals.

By following the techniques and best practices outlined in this post, you can effectively implement and manage multiple themes in your Compose-based applications. Happy coding!