Storybook Dark Mode 项目教程

1. 项目目录结构及介绍

storybook-dark-mode/
├── .github/
│   └── ISSUE_TEMPLATE/
├── .storybook/
│   ├── main.js
│   ├── preview.js
│   └── theme.js
├── src/
│   ├── index.js
│   └── useDarkMode.js
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• .github/: 存放GitHub相关的配置文件，如Issue模板。
• .storybook/: Storybook的配置文件目录，包含main.js、preview.js和theme.js。
• src/: 项目的源代码目录，包含主要的JavaScript文件。
• .gitignore: Git忽略文件，指定哪些文件或目录不需要被Git管理。
• LICENSE: 项目的开源许可证文件。
• package.json: 项目的依赖管理文件，包含项目的依赖和脚本。
• README.md: 项目的说明文档。
• yarn.lock: Yarn包管理器的锁定文件，确保依赖版本的一致性。

2. 项目启动文件介绍

src/index.js

这是项目的入口文件，通常用于初始化项目或加载其他模块。

// src/index.js
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
import useDarkMode from './useDarkMode';

addons.setConfig({
  theme: useDarkMode() ? themes.dark : themes.light,
});

src/useDarkMode.js

这个文件定义了useDarkMode函数，用于检测当前是否为暗模式。

// src/useDarkMode.js
export default function useDarkMode() {
  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

3. 项目配置文件介绍

.storybook/main.js

这是Storybook的主要配置文件，用于配置Storybook的行为。

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', 'storybook-dark-mode'],
  framework: '@storybook/react',
};

.storybook/preview.js

这是Storybook的预览配置文件，用于配置Storybook的预览行为。

// .storybook/preview.js
import { addDecorator } from '@storybook/react';
import { withThemes } from 'storybook-addon-themes';

addDecorator(withThemes);

.storybook/theme.js

这是Storybook的主题配置文件，用于定义Storybook的主题。

// .storybook/theme.js
import { create } from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'Storybook Dark Mode',
  brandUrl: 'https://github.com/hipstersmoothie/storybook-dark-mode',
  brandImage: 'https://example.com/logo.png',
});

通过以上配置，你可以轻松地在Storybook中启用暗模式，并根据需要自定义主题。