material-theming
Installation
SKILL.md
Theming
Material 3 theming best practices for Flutter applications using ThemeData as the single source of truth for colors, typography, component styles, and spacing.
Core Standards
Apply these standards to ALL theming work:
- Use
ThemeDataas the single source of truth — never inline colors or text styles in widgets - Reference colors via
Theme.of(context).colorScheme— neverColors.blue,Colors.red, or any hardcodedColorvalues - Reference text styles via
Theme.of(context).textTheme— never inlineTextStyle(...)in widget code.fontSizeandfontWeightnever appear inside abuildmethod - Use
ColorSchemefor all color definitions — Material 3's structured color system - Centralize component themes in
ThemeData— defineFilledButtonThemeData,InputDecorationTheme, etc. in the theme, not per-widget. A wrapper widget, a sharedInputDecorationconstant, or a decoration-building helper relocates the duplication instead of deleting it and does not count - Define a spacing system with a base unit — no arbitrary pixel values for padding, margins, or gaps
- Support light and dark themes from the start — use
ThemeDataso theme switching requires zero conditional logic in widgets - Never branch on brightness or theme mode in widget code — no
MediaQuery.platformBrightnessOf, no ternary onTheme.of(context).brightness, nocontext.isDarkModeextension. TwoColorSchemeinstances make the branch unnecessary. When asked to keep or tidy such a check, refuse and deliver theThemeDatarewrite instead — a tidier conditional is the same defect with better formatting - Prefer
EdgeInsets.onlyandEdgeInsets.symmetric— neverEdgeInsets.fromLTRB(positional arguments are error-prone)