storybook-dark-mode
一个 Storybook 插件，允许用户在暗色和亮色模式之间切换。
安装
安装以下 npm 模块
npm i --save-dev storybook-dark-mode
或使用 yarn
yarn add -D storybook-dark-mode
然后，将以下内容添加到 .storybook/main.js 中
module.exports = {
addons: ['storybook-dark-mode']
};
配置
通过将以下内容添加到 .storybook/preview.js 文件中来配置暗色和亮色模式
import { themes } from '@storybook/theming';
export parameters = {
darkMode: {
// Override the default dark theme
dark: { ...themes.dark, appBg: 'black' },
// Override the default light theme
light: { ...themes.normal, appBg: 'red' }
}
};
默认主题
初始配色方案的优先级顺序
- 如果用户之前设置过配色主题，则使用该主题
- 您在 Storybook 中为
current参数配置的值 - 操作系统的配色方案偏好
一旦设置了初始配色方案，后续重新加载将使用此值。要清除缓存的配色方案，您需要在 Chrome 控制台中执行 localStorage.clear()。
export parameters = {
darkMode: {
// Set the initial theme
current: 'light'
}
};
暗色/亮色 类名
此插件将为管理器应用暗色和亮色类名。这使得您可以轻松地为 Storybook UI 编写支持暗色模式的主题覆盖样式。
您可以使用 darkClass 和 lightClass 参数覆盖在亮色和暗色模式之间切换时应用的类名。
export parameters = {
darkMode: {
darkClass: 'lights-out',
lightClass: 'lights-on'
}
};
预览类名目标
此插件将把暗色/亮色类名应用到预览 iframe 的 <body> 元素上。这可以通过 classTarget 参数进行配置。该值将被传递给 iframe 内的 querySelector()。
如果 <body> 根据父元素的类进行样式化，这会很有用，在这种情况下，可以将其设置为 html。
export parameters = {
darkMode: {
classTarget: 'html'
}
}
Story 集成
预览类名
如果您开启 stylePreview 选项，此插件将把 darkClass 和 lightClass 类应用到预览 iframe。
export parameters = {
darkMode: {
stylePreview: true
}
};
React
如果您的组件使用了自定义的 Theme provider，您可以通过使用提供的 hook 来集成它。
import { useDarkMode } from 'storybook-dark-mode';
import { addDecorator } from '@storybook/react';
// your theme provider
import ThemeContext from './theme';
// create a component that uses the dark mode hook
function ThemeWrapper(props) {
// render your custom theme provider
return (
<ThemeContext.Provider value={useDarkMode() ? darkTheme : defaultTheme}>
{props.children}
</ThemeContext.Provider>
);
}
export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>)];
主题 Knobs
如果您希望 UI 的暗色模式与组件的暗色模式分开，请实现此全局 decorator
import { themes } from '@storybook/theming';
// Add a global decorator that will render a dark background when the
// "Color Scheme" knob is set to dark
const knobDecorator = (storyFn) => {
// A knob for color scheme added to every story
const colorScheme = select('Color Scheme', ['light', 'dark'], 'light');
// Hook your theme provider with some knobs
return React.createElement(ThemeProvider, {
// A knob for theme added to every story
theme: select('Theme', Object.keys(themes), 'default'),
colorScheme,
children: [
React.createElement('style', {
dangerouslySetInnerHTML: {
__html: `html { ${
colorScheme === 'dark' ? 'background-color: rgb(35,35,35);' : ''
} }`
}
}),
storyFn()
]
});
}
export const decorators = [knobDecorator];
事件
您还可以通过插件通道监听 DARK_MODE 事件。
import addons from '@storybook/addons';
import { addDecorator } from '@storybook/react';
// your theme provider
import ThemeContext from './theme';
// get channel to listen to event emitter
const channel = addons.getChannel();
// create a component that listens for the DARK_MODE event
function ThemeWrapper(props) {
// this example uses hook but you can also use class component as well
const [isDark, setDark] = useState(false);
useEffect(() => {
// listen to DARK_MODE event
channel.on('DARK_MODE', setDark);
return () => channel.off('DARK_MODE', setDark);
}, [channel, setDark]);
// render your custom theme provider
return (
<ThemeContext.Provider value={isDark ? darkTheme : defaultTheme}>
{props.children}
</ThemeContext.Provider>
);
}
export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>)];
贡献者 ✨
感谢这些很棒的人 (表情符号键)
本项目遵循 all-contributors 规范。欢迎任何形式的贡献！
