Docs
/
Theme
/
Mix Theme

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