The OCR Android App utilizes Jetpack Compose with Material 3 to create a modern and consistent user interface. The theming system is designed to be flexible, supporting both light and dark modes, as well as dynamic color theming on compatible Android versions (Android 12+).

The core of the theming is encapsulated within the com.musagenius.ocrapp.presentation.ui.theme package. This includes definitions for color palettes, typography scales, and the main theme composable that brings them together. The theme is applied at the root of the application in MainActivity, ensuring all composables within the app inherit the specified Material 3 styles.

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt, app/src/main/java/com/musagenius/ocrapp/MainActivity.kt:19-25

Theme Application

The application's theme is applied through the OCRAppTheme composable function. This function wraps the entire UI content of the app within MainActivity. It acts as a provider for MaterialTheme, which supplies color, typography, and shape information to all descendant composables.

Sources: app/src/main/java/com/musagenius/ocrapp/MainActivity.kt:19-25

`OCRAppTheme` Composable

The OCRAppTheme function is the central point for theme configuration. It determines which color scheme to apply based on system settings and device capabilities.

// app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:85-91
@Composable
fun OCRAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {

The function accepts the following parameters:

Parameter	Type	Default Value	Description
`darkTheme`	`Boolean`	`isSystemInDarkTheme()`	Determines if the dark color scheme should be used. Defaults to the system's light/dark mode setting.
`dynamicColor`	`Boolean`	`true`	Enables dynamic theming based on the user's wallpaper on Android 12 (API 31) and higher.
`content`	`@Composable () -> Unit`	-	The composable content to which the theme will be applied.

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:85-91

The theme is applied in MainActivity as follows:

// app/src/main/java/com/musagenius/ocrapp/MainActivity.kt:20-22
setContent {
    OCRAppTheme {
        Surface(

Sources: app/src/main/java/com/musagenius/ocrapp/MainActivity.kt:20-22

Color System

The color system is defined by two main components: the raw color values in Color.kt and the ColorScheme objects in Theme.kt. The app provides distinct, static color schemes for both light and dark modes, and can also leverage dynamic colors from the system.

Color Scheme Selection Logic

The OCRAppTheme composable contains logic to select the appropriate ColorScheme based on its parameters and the device's Android version.

The following diagram illustrates the decision flow for selecting a color scheme.

Generating architecture diagram...

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:92-98

Static Color Palettes

When dynamic color is unavailable or disabled, the app falls back to predefined static color schemes. These are defined in Color.kt and assembled into lightColorScheme and darkColorScheme objects in Theme.kt.

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Color.kt, app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:13-83

Light Theme Colors

A selection of primary colors for the light theme.

Role	Color Value
`primary`	`#6750A4`
`onPrimary`	`#FFFFFF`
`primaryContainer`	`#EADDFF`
`background`	`#FFFBFE`
`surface`	`#FFFBFE`
`error`	`#B3261E`

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Color.kt:4-29

Dark Theme Colors

A selection of primary colors for the dark theme.

Role	Color Value
`primary`	`#D0BCFF`
`onPrimary`	`#381E72`
`primaryContainer`	`#4F378B`
`background`	`#1C1B1F`
`surface`	`#1C1B1F`
`error`	`#F2B8B5`

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Color.kt:32-57

Typography

The app's typography is defined in Type.kt and adheres to the Material 3 type scale. A Typography object is created with predefined TextStyles for different semantic roles, such as headlines, titles, and body text. This Typography object is passed to the MaterialTheme in OCRAppTheme.

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Type.kt, app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:101

// app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Type.kt:6-12
val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 57.sp,
        lineHeight = 64.sp,
        letterSpacing = (-0.25).sp,
    ),
// ... other styles
)

Type Scale

The following table summarizes some of the key text styles defined for the application.

Style Name	Font Weight	Font Size	Line Height
`displayLarge`	Normal	57.sp	64.sp
`headlineLarge`	Normal	32.sp	40.sp
`titleLarge`	Bold	22.sp	28.sp
`bodyLarge`	Normal	16.sp	24.sp
`labelLarge`	Medium	14.sp	20.sp

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Type.kt:6-102

XML Base Theme

Before the Jetpack Compose UI is loaded, the application uses a base theme defined in app/src/main/res/values/themes.xml. This theme, Theme.OCRApp, inherits from android:Theme.Material3.DayNight.NoActionBar. Its primary role is to set up the system UI, such as making the status and navigation bars transparent, to allow for edge-to-edge content rendering.

<!-- app/src/main/res/values/themes.xml:3-7 -->
<style name="Theme.OCRApp" parent="android:Theme.Material3.DayNight.NoActionBar">
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

This ensures a seamless transition as the Compose UI takes over screen rendering.

Sources: app/src/main/res/values/themes.xml

Resources

AI code review
Bug Bench
AI coding statistics
Coding standards
Agents
Wikis

View on GitHub

Back to directory

Repository

musabadru/ocr-android-app

Overview

Home Getting Started Project Roadmap & TODOs

System Architecture

Architecture Overview Presentation Layer Domain Layer Data Layer Dependency Injection (Hilt)

Core Features

Data Management

Data: Database Schema (Room)Data: Scan History & Management Data: State Management

Frontend Components

UI: Theming (Material 3)UI: Navigation UI: Camera Screen UI: Image Editor Screen UI: OCR Result Screen UI: Custom UI Components

Model Integration

Model: Tesseract OCR Integration

Development & Deployment

Dev: Building the Application Dev: Testing Strategy Dev: Handling Permissions Dev: File & Storage Management

UI: Theming (Material 3)

Relevant source files

The following files were used as context for generating this wiki page:

app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt
app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Color.kt
app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Type.kt
app/src/main/res/values/themes.xml
app/src/main/java/com/musagenius/ocrapp/MainActivity.kt

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt, app/src/main/java/com/musagenius/ocrapp/MainActivity.kt:19-25

Theme Application

Sources: app/src/main/java/com/musagenius/ocrapp/MainActivity.kt:19-25

`OCRAppTheme` Composable

The OCRAppTheme function is the central point for theme configuration. It determines which color scheme to apply based on system settings and device capabilities.

// app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:85-91
@Composable
fun OCRAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {

The function accepts the following parameters:

Parameter	Type	Default Value	Description
`darkTheme`	`Boolean`	`isSystemInDarkTheme()`	Determines if the dark color scheme should be used. Defaults to the system's light/dark mode setting.
`dynamicColor`	`Boolean`	`true`	Enables dynamic theming based on the user's wallpaper on Android 12 (API 31) and higher.
`content`	`@Composable () -> Unit`	-	The composable content to which the theme will be applied.

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:85-91

The theme is applied in MainActivity as follows:

// app/src/main/java/com/musagenius/ocrapp/MainActivity.kt:20-22
setContent {
    OCRAppTheme {
        Surface(

Sources: app/src/main/java/com/musagenius/ocrapp/MainActivity.kt:20-22

Color System

Color Scheme Selection Logic

The OCRAppTheme composable contains logic to select the appropriate ColorScheme based on its parameters and the device's Android version.

The following diagram illustrates the decision flow for selecting a color scheme.

Generating architecture diagram...

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:92-98

Static Color Palettes

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Color.kt, app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:13-83

Light Theme Colors

A selection of primary colors for the light theme.

Role	Color Value
`primary`	`#6750A4`
`onPrimary`	`#FFFFFF`
`primaryContainer`	`#EADDFF`
`background`	`#FFFBFE`
`surface`	`#FFFBFE`
`error`	`#B3261E`

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Color.kt:4-29

Dark Theme Colors

A selection of primary colors for the dark theme.

Role	Color Value
`primary`	`#D0BCFF`
`onPrimary`	`#381E72`
`primaryContainer`	`#4F378B`
`background`	`#1C1B1F`
`surface`	`#1C1B1F`
`error`	`#F2B8B5`

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Color.kt:32-57

Typography

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Type.kt, app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Theme.kt:101

// app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Type.kt:6-12
val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 57.sp,
        lineHeight = 64.sp,
        letterSpacing = (-0.25).sp,
    ),
// ... other styles
)

Type Scale

The following table summarizes some of the key text styles defined for the application.

Style Name	Font Weight	Font Size	Line Height
`displayLarge`	Normal	57.sp	64.sp
`headlineLarge`	Normal	32.sp	40.sp
`titleLarge`	Bold	22.sp	28.sp
`bodyLarge`	Normal	16.sp	24.sp
`labelLarge`	Medium	14.sp	20.sp

Sources: app/src/main/java/com/musagenius/ocrapp/presentation/ui/theme/Type.kt:6-102

XML Base Theme

<!-- app/src/main/res/values/themes.xml:3-7 -->
<style name="Theme.OCRApp" parent="android:Theme.Material3.DayNight.NoActionBar">
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

This ensures a seamless transition as the Compose UI takes over screen rendering.

Sources: app/src/main/res/values/themes.xml

Resources

AI code review
Bug Bench
AI coding statistics
Coding standards
Agents
Wikis

View on GitHub

UI: Theming (Material 3)

Theme Application

OCRAppTheme Composable

Color System

Color Scheme Selection Logic

Static Color Palettes

Light Theme Colors

Dark Theme Colors

Typography

Type Scale

XML Base Theme

UI: Theming (Material 3)

Theme Application

OCRAppTheme Composable

Color System

Color Scheme Selection Logic

Static Color Palettes

Light Theme Colors

Dark Theme Colors

Typography

Type Scale

XML Base Theme

`OCRAppTheme` Composable

`OCRAppTheme` Composable