Storybook Addon Render Modes

This addon adds ability to emulate user CSS rendering preferences such as prefers-reduced-motion and others.

Initially fork of storybook-addon-css-user-prefs to support sb@^8.0.0

List of supported modes:

• prefers-color-scheme
• prefers-contrast
• prefers-reduced-data
• prefers-reduced-motion
• prefers-reduced-transparency
• print (todo)
• noscript (todo)

Installation

1. Package installation pnpm add -D storybook-addon-render-modes

2. Addon registration

1const config: StorybookConfig = {
2  // ...yourOtherSettings
3  addons: [
4    'storybook-addon-render-modes',
5  ],
6};
7
8export 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.