Jetpack Compose: Dynamic Themes with User Input

Jetpack Compose, Android’s modern UI toolkit, allows developers to build dynamic and interactive user interfaces. One compelling aspect is the ability to create dynamic themes based on user input, offering a personalized user experience. In this blog post, we’ll explore how to implement dynamic themes in Jetpack Compose, allowing users to customize the look and feel of their application.

Understanding Dynamic Themes

A dynamic theme allows the user to change various aspects of the application’s appearance, such as colors, typography, and shapes, at runtime. Implementing dynamic themes provides:

• User Personalization: Tailoring the app’s look and feel to match user preferences.
• Accessibility: Providing options to adjust themes for better readability and usability.
• Branding Opportunities: Enabling white-labeling and custom branding features.

Implementing Dynamic Themes in Jetpack Compose

To implement dynamic themes, you can use Kotlin’s State and CompositionLocal features in Jetpack Compose.

Step 1: Define Theme Attributes

First, define the theme attributes that users can customize. For instance, let’s consider customizing primary and secondary colors.

import androidx.compose.ui.graphics.Color

data class AppColors(
    val primary: Color,
    val secondary: Color,
    val background: Color,
    val onPrimary: Color, // Color on top of primary
    val onSecondary: Color // Color on top of secondary
)

val defaultColors = AppColors(
    primary = Color(0xFF6200EE),
    secondary = Color(0xFF03DAC5),
    background = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black
)

Step 2: Create a CompositionLocal

Use CompositionLocal to provide these theme attributes down the composition tree. This allows composables to access theme properties without explicitly passing them as arguments.

import androidx.compose.runtime.staticCompositionLocalOf

val LocalAppColors = staticCompositionLocalOf { defaultColors }

Step 3: Implement Theme Provider Composable

Create a composable that provides the current theme values using CompositionLocalProvider. This allows us to dynamically update and propagate changes.

import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun AppTheme(
    colors: AppColors = defaultColors,
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(LocalAppColors provides colors) {
        content()
    }
}

Step 4: Create a Theme Settings Screen

Now, let’s create a UI for users to adjust the theme. This involves creating controls, such as sliders or color pickers, to modify the theme’s attributes.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun ThemeSettingsScreen() {
    val (currentColors, setColors) = remember { mutableStateOf(defaultColors) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        ColorSetting(
            label = "Primary Color",
            currentColor = currentColors.primary,
            onColorChange = { newColor ->
                setColors(currentColors.copy(primary = newColor))
            }
        )

        ColorSetting(
            label = "Secondary Color",
            currentColor = currentColors.secondary,
            onColorChange = { newColor ->
                setColors(currentColors.copy(secondary = newColor))
            }
        )

        // Wrap the content with the dynamically updated AppTheme
        AppTheme(colors = currentColors) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp)
                    .background(LocalAppColors.current.primary)
            ) {
                Text(
                    text = "Preview Text",
                    color = LocalAppColors.current.onPrimary,
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }
}

@Composable
fun ColorSetting(label: String, currentColor: Color, onColorChange: (Color) -> Unit) {
    Column(modifier = Modifier.padding(8.dp)) {
        Text(text = label, style = MaterialTheme.typography.subtitle1)
        
        // Simplified Color Display - Consider a proper Color Picker for real apps
        Box(
            modifier = Modifier
                .size(48.dp)
                .background(currentColor)
        )
        
        // Simplified Change Button - Replace with proper UI Component in real apps
        Button(onClick = {
            // Example color change logic: Replace with actual color picker input
            val newColor = Color(
                red = kotlin.random.Random.nextFloat(),
                green = kotlin.random.Random.nextFloat(),
                blue = kotlin.random.Random.nextFloat(),
                alpha = 1f
            )
            onColorChange(newColor)
        }) {
            Text("Change Color")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ThemeSettingsScreenPreview() {
    MaterialTheme { // Required for Typography
        ThemeSettingsScreen()
    }
}

Key elements in the settings screen:

• State Management: The currentColors state variable holds the current theme colors.
• Color Setting Component: Provides UI elements (e.g., buttons or sliders) to adjust the color values. In this simplified version, a button click generates a random color. A real implementation should integrate with a color picker.
• AppTheme Wrapping: Surrounds the preview area with the AppTheme composable, allowing changes to dynamically update the appearance of enclosed UI elements.

Step 5: Use the Theme Values in Your Composable

Consume the theme values using LocalAppColors.current in your composables.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun MyComposable() {
    val appColors = LocalAppColors.current

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .background(appColors.primary)
    ) {
        Text(
            text = "Hello Dynamic Theme!",
            color = appColors.onPrimary,
            modifier = Modifier.padding(16.dp)
        )
    }
}

Best Practices for Dynamic Theming

• Centralized Theme Management: Keep all theme-related logic in a central location for easier maintenance.
• Accessibility Considerations: Ensure that theme changes don’t compromise the app’s accessibility. Provide options for high contrast themes.
• Performance: Be mindful of performance when applying theme changes, especially in complex UIs. Minimize unnecessary recompositions.

Conclusion

Implementing dynamic themes in Jetpack Compose allows you to provide a personalized and accessible experience for your users. By using State, CompositionLocal, and CompositionLocalProvider, you can create a flexible theming system that dynamically adapts to user preferences. Experiment with various attributes like colors, typography, and shapes to create compelling and user-centric interfaces. Remember to prioritize accessibility and performance for the best user experience.