Lesson 7: Theming with Material 3

This lesson demonstrates comprehensive theming in Android with Jetpack Compose using Material 3 Design.

📸 Visual Results

See the app in action! Below are screenshots showing the complete implementation of Material 3 theming:

Light Mode

Light theme showcasing the complete typography hierarchy (Display, Headline, Title, Body, Label) and Material 3 color palette with proper contrast ratios.

Light theme displaying various Material 3 components including Filled, Tonal, Outlined, Elevated, and Text buttons, along with Card variations and interactive controls.

Dark Mode

Dark theme with adjusted color scheme showing how all typography styles and colors automatically adapt for optimal readability in low-light conditions.

Dark theme demonstrating that all Material 3 components seamlessly transition to dark mode with appropriate surface colors and contrast preservation.

What to Notice in the Screenshots:

• Theme Toggle: Sun/Moon icon in the top bar switches between light and dark modes
• Color Adaptation: Every component automatically uses theme-appropriate colors
• Typography Hierarchy: Clear visual distinction between Display, Headline, Title, Body, and Label styles
• Component Variety: Multiple button styles, cards, switches, checkboxes, and chips all respecting the theme
• Contrast & Accessibility: Proper "on" colors ensure text remains readable on all backgrounds
• Smooth Transitions: All UI elements update instantly when toggling themes

📚 What You'll Learn

1. Material 3 Color Schemes

• Complete light and dark color schemes
• Primary, Secondary, Tertiary colors and their variants
• Surface, Background, and Error colors
• Proper "on" colors for contrast (onPrimary, onSecondary, etc.)

2. Typography System

• Display styles (Large, Medium, Small) - for the largest text
• Headline styles (Large, Medium, Small) - for section headers
• Title styles (Large, Medium, Small) - for card titles and labels
• Body styles (Large, Medium, Small) - for content text
• Label styles (Large, Medium, Small) - for small captions

3. Runtime Theme Toggle

• Dark mode toggle with a switch button
• Smooth transitions between themes
• Persistent theme state using remember
• Status bar appearance changes based on theme

4. Material 3 Components

• Buttons: Filled, Tonal, Outlined, Elevated, Text
• Cards: Filled and Outlined
• Selection controls: Switch, Checkbox
• Chips: Assist, Filter, Suggestion

🎨 Key Concepts

Color Scheme Structure

Material 3 uses a comprehensive color system:

Primary - Main brand color
Secondary - Accent color for less prominent elements
Tertiary - Additional accent for variety
Error - For error states and warnings
Surface - Component backgrounds
Background - Screen background

Each color has a corresponding "on" color for text/icons that appear on top of it.

Typography Hierarchy

Material 3 provides 15 text styles organized by purpose:

• Display: Hero text (57sp, 45sp, 36sp)
• Headline: Section headers (32sp, 28sp, 24sp)
• Title: Subsections and cards (22sp, 16sp, 14sp)
• Body: Main content (16sp, 14sp, 12sp)
• Label: Small text and captions (14sp, 12sp, 11sp)

Theme Implementation

1. Color.kt: Defines all color values
2. Type.kt: Defines typography styles
3. Theme.kt: Combines colors and typography into MaterialTheme
4. MainActivity.kt: Uses the theme and provides toggle functionality

🚀 Features Implemented

1. Dynamic Theme Switching

• Toggle button in the app bar
• Icon changes based on current theme (sun/moon)
• Entire UI updates reactively

2. Typography Showcase

• Demonstrates all major text styles
• Shows proper hierarchy and sizing
• Uses semantic styling (headline for headers, body for content)

3. Color Palette Display

• Visual representation of each color role
• Shows proper contrast between background and foreground
• Demonstrates Material 3 color tokens

4. Component Gallery

• Various button styles with theme-aware colors
• Different card types
• Interactive controls (switches, checkboxes)
• Modern chip components

💡 Best Practices Demonstrated

1. Use Theme Colors: Always use MaterialTheme.colorScheme.* instead of hardcoded colors
2. Use Typography Styles: Use MaterialTheme.typography.* instead of manual text styling
3. Semantic Naming: Use colors by role (primary, error) not by appearance (red, blue)
4. Accessibility: Proper contrast ratios with "on" colors
5. Consistency: All components automatically adapt to theme changes

🔧 How to Use

Applying a Theme

AndroidKotlinLesson7Theme(darkTheme = isDarkTheme) {
    // Your composables here
}

Using Theme Colors

Text(
    text = "Hello",
    color = MaterialTheme.colorScheme.primary
)

Using Typography

Text(
    text = "Title",
    style = MaterialTheme.typography.headlineMedium
)

Creating Themed Components

Card(
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surfaceVariant
    )
) {
    // Card content
}

📱 Running the App

1. Open the project in Android Studio
2. Run the app on an emulator or device
3. Tap the sun/moon icon in the top bar to toggle between light and dark themes
4. Scroll through the app to see all themed components

🎯 Key Takeaways

• Material 3 provides a comprehensive design system
• Themes should be defined once and applied consistently
• Runtime theme switching is simple with state management
• All Material components automatically respect the theme
• Proper color contrast and typography hierarchy improve UX

📖 Further Learning

• Explore custom color schemes with Material Theme Builder
• Learn about dynamic color (Android 12+) which adapts to wallpaper
• Study accessibility guidelines for color contrast
• Implement theme persistence with DataStore
• Create custom typography with different font families