Vue 中的 Storybook 暗黑模式 🌙

➕ 安装

npm i storybook-darkmode-vue -D
yarn add storybook-darkmode-vue -D

🎉 目标

开发一个 Vue 应用，通过 Storybook 提供 暗黑模式。

💻 预览

浅色模式	暗黑模式

🚧 用法

使用已有的 DarkModeWrapper，

// stories
import { storiesOf } from '@storybook/vue';
import DarkModeWrapper from 'storybook-darkmode-vue/DarkModeWrapper';
import DarkModeSample from './DarkModeSample';

storiesOf('Sample', module).add('sample1', () => ({
  data: () => ({}),
  components: {
    DarkModeWrapper,
    DarkModeSample,
  },
  methods: {},
  template: `
    <div>
      <DarkModeWrapper v-slot="{isDarkMode}">
        <DarkModeSample :is-dark-mode="isDarkMode"/>
      </DarkModeWrapper>
    </div>
  `,
}));

或自行创建 Wrapper。

import { addons } from '@storybook/addons'

const channel = addons.getChanel();

channel.on('STORYBOOK_DARK_MODE_VUE, () => {
    // ... 
});

channel.off('STORYBOOK_DARK_MODE_VUE', () => {
    // ...
});

🔧 配置

需要按如下方式注册

// addons.js
import 'storybook-darkmode-vue/register'

🙇 贡献

请参阅 CONTRIBUTING.md。