jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

storybookでダークモードの対応を行う

storybook-dark-mode を追加することでstorybookでダークモードの対応を行うことができるので、その時に対応メモ。

実行結果

ライトモード

f:id:jackswim3411:20200309232034p:plain

ダークモード

f:id:jackswim3411:20200309232052p:plain

パッケージインストール¥

$ yarn add -D storybook-dark-mode

or

$ npm i -D storybook-dark-mode

github.com

.storybook/main.jsのaddons部分に記載

module.exports = {
  addons: [
    // 省略
    'storybook-dark-mode/register' // これを追記
  ],
}

.storybook/config.jsのaddParameters部分に記載

addParameters({
  darkMode: {
    // Override the default dark theme
    dark: { ...themes.dark, appBg: 'black' },
    // Override the default light theme
    light: { ...themes.normal, appBg: 'white' }
  }
})

エラー対応

現状だと以下のエラーが出たので、それの対応。

f:id:jackswim3411:20200309233915p:plain

themesがないと言われるので、@storybook/themingをインストールして対応。

$ yarn add -D @storybook/theming

or

$ npm i -D @storybook/theming

参考

https://storybook.js.org/docs/configurations/theming/

www.npmjs.com

.storybook/config.jsに以下を記載。

import { themes } from '@storybook/theming'

// いろいろな内容

補足

画像の青い部分でダークモード・ライトモードの切り替えが可能。

f:id:jackswim3411:20200309234605p:plain