MaterialTheme และชุดสี

MaterialTheme is the wrapper that hands colors, fonts, and shapes to every Composable inside it, so you style your app in one place. 🎨

You usually wrap your whole UI in your app theme, which calls MaterialTheme at its core. Everything inside then reads from that single source.

The first thing colorScheme defines is your palette: the named colors every Material component reaches for automatically.

Material 3 uses color roles like primary and surface instead of raw hex everywhere, so components stay consistent and easy to retheme.

The primary role is your brand color for key actions, and onPrimary is the readable color drawn on top of it, like white text on a blue button.

The surface and background roles paint cards, sheets, and the screen behind everything, while onSurface keeps content legible on them.

You craft a palette with lightColorScheme, overriding only the roles you care about and letting sensible defaults fill the rest.

Inside any Composable you grab theme colors through MaterialTheme.colorScheme, so a color change in the theme flows everywhere at once.

Pass a role into a Composable and it stays on-theme; here a Surface paints itself with the primary color from the active colorScheme.

Roles like primaryContainer give softer, tonal backgrounds for chips and highlights, paired with onPrimaryContainer for their text.

Because components ask the theme for colors, swapping one colorScheme instantly restyles the entire app, with no per-widget edits. ✨

Where do your app-wide colors live in Material 3?

You wrapped your app in MaterialTheme, defined a colorScheme of roles, and read colors back in code so one palette styles the whole UI. 🎉