storybook-tailwind-dark-mode

安裝

安裝以下 npm 模組

npm i --save-dev storybook-tailwind-dark-mode

或使用 yarn

yarn add -D storybook-tailwind-dark-mode

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

module.exports = {
  addons: ['storybook-tailwind-dark-mode'],
};

請確保 tailwind 已設定為在 tailwind.config.js 中使用 darkmode 類別

module.exports = {
  darkMode: 'class',
  // ...
} 

設定預設為深色模式

若要將深色模式設為預設值，請將以下程式碼行新增至您的 preview.js 檔案中

const preview = {
  globalTypes: {
    darkMode: {
      defaultValue: true, // Enable dark mode by default on all stories
    },
    // Optional (Default: 'dark')
    className: {
      defaultValue: 'custom-classname', // Set your custom dark mode class name
    },
  },
};