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;
  }
}