Theme Addon
The Theme Addon lets you inject a theme widget into your tree, to make your stories styled and try them out with different themes. There are 3 different variants of the Theme Addon, which depend on the theme data and widget you use in your application:
| Addon | Theme Data | Inherited Widget |
|---|---|---|
MaterialThemeAddon | ThemeData | Theme |
CupertinoThemeAddon | CupertinoThemeData | CupertinoTheme |
ThemeAddon | Custom | Custom |
Material Theme
If your app is built using MaterialApp, then you are probably using ThemeData to define your themes. Then MaterialThemeAddon is the right choice for you.
import 'package:my_app/themes.dart'; // For AppThemes
final config = Config(
// ...
addons: [
MaterialThemeAddon(
themes: [
WidgetbookTheme(
name: 'Light',
data: AppThemes.light(),
),
WidgetbookTheme(
name: 'Dark',
data: AppThemes.dark(),
),
],
),
],
);
Cupertino Theme
If your app is built using CupertinoApp, then you are probably using CupertinoThemeData to define your themes. Then CupertinoThemeAddon is the right choice for you.
import 'package:my_app/themes.dart'; // For AppThemes
final config = Config(
// ...
addons: [
CupertinoThemeAddon(
themes: [
WidgetbookTheme(
name: 'Light',
data: AppThemes.light(),
),
WidgetbookTheme(
name: 'Dark',
data: AppThemes.dark(),
),
],
),
],
);
Custom Theme
If you have a custom theme data and widget or you have a custom logic to build your theme, then ThemeAddon is the right choice for you.
import 'dart:ui';
import 'package:my_app/theme.dart'; // For AppTheme
import 'package:my_app/themes.dart'; // For AppThemes
final config = Config(
// ...
addons: [
ThemeAddon<AppThemeData>(
themes: [
WidgetbookTheme(
name: 'Light',
data: AppThemes.light(),
),
WidgetbookTheme(
name: 'Dark',
data: AppThemes.dark(),
),
],
themeBuilder: (context, theme, child) {
// Wrap use cases with the custom theme's InheritedWidget
return AppTheme(
data: theme,
child: child,
);
},
),
],
);
Order
Since the order of addons matters, here are some guidelines to follow when using the ThemeAddon:
Addons that should come before the ThemeAddon:
ViewportAddonDeviceFrameAddon
Mode
To use this addon for testing, you can enable the ThemeMode in your stories:
final $Default = _Story(
scenarios: [
_Scenario(
name: 'Dark Theme',
modes: [
// Use one of the following based on your addon
MaterialThemeMode('Dark', ThemeData.dark()),
CupertinoThemeMode('Dark', CupertinoThemeData(brightness: Brightness.dark)),
ThemeMode('Dark', myAppTheme, myAppThemeBuilder),
]
),
],
)