Storybook 主題切換

這個擴充功能可以用來在 Storybook 的 iframe html 元素中設定 data 屬性，以觸發深色和淺色模式之間的切換。

這需要在您的專案中進行適當的設定。

使用情境

您有一個使用 next-themes 的 React 應用程式來管理主題，它會在 html 元素上新增一個 data 屬性，您可以用它來設定應用程式的樣式。

您將 CSS 打包成單個檔案，並在 storybook 中載入。

// .storybook/preview.ts
import './styles.css';

您打包的 CSS 包含深色和淺色模式的樣式。

您的主要 CSS 檔案中類似這樣：

:root {
    --background: white;
    --foreground: black;
}

[data-color-theme='dark'] {
    --background: black;
    --foreground: white;
}

:warning: 警告！ 目前，此擴充功能僅適用於 data-color-theme 屬性名稱。

未來將可設定。

安裝

需要 Storybook 6.1 或更高版本。

使用 npm 安裝模組

npm i -D storybook-theme-toggle

或使用 yarn

yarn add -D storybook-theme-toggle

然後，將以下內容新增到 .storybook/main.js

module.exports = {
    addons: ['storybook-theme-toggle'],
};

點擊工具列中新的主題切換按鈕，以在深色和淺色模式之間切換。

您可能需要使用應用程式的 canvas 樣式建立一個自訂的 Layout 元件，以獲得更好的結果。

由以下人員製作

標籤