Storybook 附加组件：CSS 用户偏好

此工具栏附加组件允许您在 Storybook 中模拟 CSS 用户偏好。

入门

首先，安装附加组件。

$ yarn add storybook-addon-css-user-preferences --dev

将此行添加到您的 main.js 文件（如果需要，在您的 Storybook 配置目录中创建此文件）。

module.exports = {
  addons: ['storybook-addon-css-user-preferences'],
};

配置

默认情况下，所有 CSS 用户偏好都设置为系统默认值。

您可以使用 parameters.cssUserPrefs 参数配置您自己的用户偏好集

// .storybook/preview.js

export const parameters = {
  cssUserPrefs: {
    "prefers-color-scheme": "light",
  },
};

选项

prefers-color-scheme

prefers-color-scheme 偏好用于检测用户是否请求了浅色或深色主题。

@media (prefers-color-scheme: dark) {
  .button {
    background: #333;
    color:      #fff;
  }
}

@media (prefers-color-scheme: light) {
  .button {
    background: #fff;
    color:      #555;
  }
}

prefers-contrast

prefers-contrast 偏好用于检测用户是否请求以更高或更低对比度呈现网页内容。

.outline {
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .outline {
    outline: 2px solid black;
  }
}

prefers-reduced-data

prefers-reduced-data 偏好用于检测用户是否请求消耗更少网络流量的网页内容。

.hero {
  background-image: url("images/hero.webp");
}

@media (prefers-reduced-data: reduce) {
  .image {
    background-image: url("images/[email protected]");
  }
}

prefers-reduced-motion

prefers-reduced-motion 偏好用于检测用户是否请求系统尽量减少使用非必要动画。

.button {
  animation: pulse 1s linear infinite both;
}

@media (prefers-reduced-motion) {
  .button {
    animation: none;
  }
}

prefers-reduced-transparency

prefers-reduced-transparency 偏好用于检测用户是否请求系统尽量减少使用透明或半透明层效果。

.glass {
  opacity: 0.5; 
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    opacity: 1;
  }
}