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