Material 3 Theming

Every screen, one look

Open PawWalk and you'll notice a consistent style: cool paper backgrounds, near-black ink text, one confident indigo accent, tiny uppercase mono labels that feel like an instrument panel. That's not luck — it's a design system: colors and type defined in exactly one place, and every screen borrows from it. Change a value there, and the whole app updates.

Android's design system for this is Material 3 — Google's current design language. Jetpack Compose ships a MaterialTheme composable that every Material component (buttons, text fields, cards) reads its colors and type from automatically.

ColorScheme: named roles, not raw colors

MaterialTheme is built around a ColorScheme — a data class with dozens of named color roles: primary, onPrimary, background, onBackground, surface, onSurface, and more. Notice the naming pattern: on<Role> is always "a color that's readable on top of <Role>" — onPrimary is the text/icon color you'd put on a primary-colored button.

Compose gives you two built-in factories: lightColorScheme(...) and darkColorScheme(...). You don't have to fill in every role — pass the ones your app cares about and Material derives sensible defaults for the rest.