Skip to main content

Overview

VoiceTotextTheme is a custom theme composable that provides Material 3 styling to the Voice to Text app. It wraps the app’s content and applies color schemes, typography, and other theme properties.

Function signature

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

Parameters

darkTheme
Boolean
default:"isSystemInDarkTheme()"
Whether to use the dark color scheme. Defaults to the system’s dark theme setting.
dynamicColor
Boolean
default:"true"
Whether to use dynamic colors on Android 12+ (Material You). When enabled, the app uses colors from the system wallpaper.
content
@Composable () -> Unit
The composable content to be themed.

Implementation

@Composable
fun VoiceTotextTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Color schemes

The theme provides two static color schemes:

Light color scheme

private val LightColorScheme = lightColorScheme(
    primary = Purple40,      // Color(0xFF6650a4)
    secondary = PurpleGrey40, // Color(0xFF625b71)
    tertiary = Pink40         // Color(0xFF7D5260)
)

Dark color scheme

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,      // Color(0xFFD0BCFF)
    secondary = PurpleGrey80, // Color(0xFFCCC2DC)
    tertiary = Pink80         // Color(0xFFEFB8C8)
)

Dynamic color support

On Android 12 (API level 31) and above, the theme automatically uses Material You dynamic colors when dynamicColor is true. This extracts colors from the user’s wallpaper for a personalized experience.
if (dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
    val context = LocalContext.current
    if (darkTheme) dynamicDarkColorScheme(context) 
    else dynamicLightColorScheme(context)
}
Dynamic colors provide better integration with the Android 12+ system UI, creating a cohesive visual experience across apps.

Typography

The theme includes Material 3 typography styles:
val Typography = Typography(
    bodyLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    )
)

Usage

Wrap your app content in the theme composable to apply styling:
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            VoiceTotextTheme {
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    topBar = { AppBar() }
                ) { innerPadding ->
                    VoiceRecognitionScreen(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

Required imports

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
If you want to customize the app’s colors, modify the color values in Color.kt and update the color scheme definitions in Theme.kt.

Build docs developers (and LLMs) love