Render Modes
Storybook addon that adds ability to emulate render mode (css user preferences) of a story
Storybook Addon Render Modes
This addon adds the ability to emulate user CSS rendering preferences such as prefers-reduced-motion
and others.
This addon has support for Storybook v8+
Initially fork of storybook-addon-css-user-prefs to support sb@^8.0.0 And it's also a replacement for @jeysal/storybook-addon-css-user-preferences
List of supported modes:
- prefers-color-scheme
- prefers-contrast
- prefers-reduced-data
- prefers-reduced-motion
- prefers-reduced-transparency
print(todo)noscript(todo)
Installation
-
Package installation
pnpm add -D storybook-addon-render-modes
-
Addon registration
const config: StorybookConfig = {
// ...yourOtherSettings
addons: [
'storybook-addon-render-modes',
],
};
export default config;
Caveats
This addon doesnt force changing of rendering mode in browser level (seems impossible).
But instead it uses hacky approach: we go through document.styleSheets
via JS and manually rewriting media style rules.
This approach may work not as expected in some cases. Feel fre to create an issue for such cases.