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'
}
}
故事集成
预览类名
如果开启 stylePreview 选项，此插件将对预览 iframe 应用 darkClass 和 lightClass 类。
export parameters = {
darkMode: {
stylePreview: true
}
};
React
如果您的组件使用自定义主题提供程序，您可以使用提供的钩子进行集成。
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>)];
主题旋钮
如果您希望 UI 的黑暗模式与组件的黑暗模式分离，请实现这个全局装饰器
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 规范。欢迎任何形式的贡献！
