Storybook 擴充功能渲染模式

此擴充功能新增模擬使用者 CSS 渲染偏好設定的功能，例如 prefers-reduced-motion 等。此擴充功能支援 Storybook v8+

最初是 storybook-addon-css-user-prefs 的分支，以支援 sb@^8.0.0。它也是 @jeysal/storybook-addon-css-user-preferences 的替代品

支援模式列表

• prefers-color-scheme
• prefers-contrast
• prefers-reduced-data
• prefers-reduced-motion
• prefers-reduced-transparency
• print（待辦事項）
• noscript（待辦事項）

安裝

1. 套件安裝 pnpm add -D storybook-addon-render-modes

2. 擴充功能註冊

const config: StorybookConfig = {
  // ...yourOtherSettings
  addons: [
    'storybook-addon-render-modes',
  ],
};

export default config;

注意事項

此擴充功能不會強制在瀏覽器層級變更渲染模式（似乎不可能）。而是使用一種取巧的方法：我們透過 JS 遍歷 document.styleSheets 並手動重寫媒體樣式規則。

在某些情況下，這種方法可能無法按預期工作。如果遇到這種情況，請隨時建立問題。