New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,439
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-darkmode-vue
Storybook addons supporting darkmode in vue app
npm install storybook-darkmode-vue
Last updated over 2 years ago
93
Downloads per week
Readme View on GitHub

Storybook Darkmode in Vue 🌙

version MIT License PRs Welcome downloads Examples

➕ Install

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

🎉 Objective

Develop Vue application that provides darkmode with Storybook.

💻 Preview

Light Mode Dark Mode
LightModeImage DarkModeImage

🚧 Usage

Use either already made up 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>
  `,
}));

OR personally make Wrapper.

import { addons } from '@storybook/addons'

const channel = addons.getChanel();

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

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

🔧 Configuration

Need to register as following:

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

🙇 Contribution

See CONTRIBUTING.md.

Join the community
6,319 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI