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/hero@reduced.webp");
  }
}

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