Skip to main content
Not every widget in the app is a Styled* component — plenty of code uses plain ElevatedButton, TextField, Chip, Switch, or third-party packages that read Material’s ColorScheme/TextTheme. The Material bridge is the part of app_theme.dart that keeps all of that on-system. It has three parts:

1. Per-component themes

Every relevant *ThemeData on ThemeData is wired to Sundial tokens:
Because accent tokens feed the button/switch/slider/selection themes, persona theming applies to stock Material widgets automatically — no Styled wrapper needed for accent-correct UI.

2. ColorScheme mapping

For widgets (and packages) that read Theme.of(context).colorScheme: The rest of the scheme comes from Flutter’s default for the brightness (ThemeData(brightness: …).colorScheme), overridden with the slots above.

3. TextTheme mapping

For code that reads Material’s TextTheme (Theme.of(context).textTheme): All slots are colored contrastStrong. Note the deliberate remap: Material’s label* slots carry Sundial’s overline styles — Material has no overline category, and its label slots serve the same role.

When to rely on the bridge vs. a Styled component

  • Bridge is enough: standard Material behavior with Sundial looks — a plain button, switch, slider, dialog.
  • Use the Styled component: when Sundial adds behavior or structure beyond styling — StyledTextField’s character counter, StyledScaffold’s back handling, StyledCard’s variants. See Components.