Mix Theme

MixTheme is the base class for theming your application using Mix using Design Tokens. It makes use of a MixThemeData class, where you'll be able to style your app globally, as well as dynamically change values and colors

Initialization#

In order to style your app, wrap it in a MixTheme, usually on the builder parameter of WidgetsApp and its variant:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My app with Mix',
      home: const Home(),
      builder: (context, child) {
        return MixTheme(
          data: const MixThemeData(
            // the app style will be defined here
          ),
          child: child ?? const SizedBox.shrink(),
        );
      }
    );
  }
}

Design Tokens#

Tokens allow to define visual properties like colors, text styles, and spacing that can be consistently applied across all your widgets.

The most important difference between defining a design token in Mix vs. a constant is that Mix allows you to define context reference values that will be used on build time.

Context Tokens#

Context Tokens are design tokens that are defined at build time. With this, it's possible to do things like:

• dynamically changing the accent color of the app
• define multiple themes for different parts of the app

Context tokens are made of references (MixRef), which can be read by Mix at build time. There are a lot of built-in context tokens already available for usage, from colors to text:

For example, if you want to create a rounded button with the primary color, you can use bgColor($primary)

Learn more