storybook-addon-themes
storybook-addon-themes copied to clipboard
Add selected `theme` to `globals`
Pass selected theme
to globals
as is done in @storybook/addon-backgrounds
. This way we can access the theme
automatically in a decorator
without having to use withTheme
along with a custom theme Decorator
prop.
See example from backgrounds addon here
// snippet from storybook/addons/backgrounds/src/containers/BackgroundSelector.tsx
// ...
const [globals, updateGlobals] = useGlobals();
const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
const selectedBackgroundColor = useMemo(() => {
return getBackgroundColorByName(
globalsBackgroundColor,
backgroundsConfig.values,
backgroundsConfig.default
);
}, [backgroundsConfig, globalsBackgroundColor]);
if (Array.isArray(backgroundsConfig)) {
logger.warn(
'Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md'
);
}
const onBackgroundChange = useCallback(
(value: string) => {
updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } });
},
[backgroundsConfig, globals, updateGlobals]
);
// ...