Docs
/Theme
/Design Tokens
Design Tokens
Symbols that are able to reference values within the BuildContext
.
- Use Material Theme values within any Mix (even outside of BuildContext)
- Define dynamic BuildContext values that want to reuse throughout the app.
- Dynamically changing the accent color of the app
Design Tokens are made of references (MixToken
), which can be read by Mix
at run time. There are a lot of built-in context design tokens already available for usage, from colors to text:
For example, if you want to create a button with the primary color, you can use bgColor($primary)
:
Mix get style => Mix(
textStyle($body2), // Text theme from Material Theme
bgColor($primary), // use the primary color from Material Theme
(hover)(
bgColor($secondary), // when hovering, use the secondary color
),
);
class MyButton extends StatelessWidget {
const MyButton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Pressable( // call your button
mix: style,
child: const TextMix('Details'),
onPressed: () {},
);
}
}
Material Theme Tokens
The built-in context references you can use on your app. They are based on the material theme:
Text Theme
Material 2
- $h1, $h2, $h3, $h4, $h5, $h6
- $subtitle1, $subtitle2
- $body1, $body1
- $caption, $button, $overline
Material 3
- $displaySmall, $displayMedium, $displayLarge
- $headlineSmall, $headlineMedium, $headlineLarge
- $titleSmall, $titleMedium, $titleLarge
- $bodySmall, $bodyMedium, $bodyLarge
- $labelSmall, $labelMedium, $labelLarge
Color Scheme
- $primary, $secondary, $surface, $background, $error
- $onPrimary, $onSecondary, $onSurface, $onBackground, $onError
- colorScheme: returns all the colors above
Creating New Design Tokens
First, define a call to that reference. It'll be used by the attributes at build time. It usually starts with a dollar sign ($
):
const $myColor = ColorRef('myColor');
Then, define it on your MixThemeData
:
MixTheme(
data: MixThemeData(
designTokens: {
$myColor: (BuildContext context) {
final brightness = Theme.of(context).brightness;
if (brightness == Brightness.light) {
return Colors.black;
} else {
return Colors.white;
}
}
}
),
child: ...,
),
Finally, use it a Mix
:
final myMix = Mix(
bgColor($myColor),
);