storybookでダークモードの対応を行う
storybook-dark-mode
を追加することでstorybookでダークモードの対応を行うことができるので、その時に対応メモ。
実行結果
ライトモード
ダークモード
パッケージインストール¥
$ yarn add -D storybook-dark-mode
or
$ npm i -D storybook-dark-mode
.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' } } })
エラー対応
現状だと以下のエラーが出たので、それの対応。
themes
がないと言われるので、@storybook/theming
をインストールして対応。
$ yarn add -D @storybook/theming
or
$ npm i -D @storybook/theming
参考
https://storybook.js.org/docs/configurations/theming/
.storybook/config.js
に以下を記載。
import { themes } from '@storybook/theming' // いろいろな内容
補足
画像の青い部分でダークモード・ライトモードの切り替えが可能。