Merge pull request #182 from frassinier/master

feat: add update_dark_mode event

README.md

@@ -91,7 +91,7 @@ export const parameters = {
   darkMode: {
     classTarget: 'html'
   }
-}
+};
 ```
 
 ## Story integration
@@ -141,7 +141,7 @@ 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) => {
+const knobDecorator = storyFn => {
   // A knob for color scheme added to every story
   const colorScheme = select('Color Scheme', ['light', 'dark'], 'light');
 
@@ -161,7 +161,7 @@ const knobDecorator = (storyFn) => {
       storyFn()
     ]
   });
-}
+};
 
 export const decorators = [knobDecorator];
 ```
@@ -173,6 +173,7 @@ You can also listen for the `DARK_MODE` event via the addons channel.
 ```js
 import addons from '@storybook/addons';
 import { addDecorator } from '@storybook/react';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 
 // your theme provider
 import ThemeContext from './theme';
@@ -187,8 +188,8 @@ function ThemeWrapper(props) {
 
   useEffect(() => {
     // listen to DARK_MODE event
-    channel.on('DARK_MODE', setDark);
-    return () => channel.off('DARK_MODE', setDark);
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
   }, [channel, setDark]);
 
   // render your custom theme provider
@@ -202,6 +203,53 @@ function ThemeWrapper(props) {
 export const decorators = [renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>)];
 ```
 
+Since in docs mode, Storybook will not display its toolbar,
+You can also trigger the `UPDATE_DARK_MODE` event via the addons channel if you want to control that option in docs mode,
+By editing your `.storybook/preview.js`.
+
+```js
+import React from 'react';
+import addons from '@storybook/addons';
+import { DocsContainer } from '@storybook/addon-docs';
+import { themes } from '@storybook/theming';
+
+import {
+  DARK_MODE_EVENT_NAME,
+  UPDATE_DARK_MODE_EVENT_NAME
+} from 'storybook-dark-mode';
+
+const channel = addons.getChannel();
+
+export const parameters = {
+  darkMode: {
+    current: 'light',
+    dark: { ...themes.dark },
+    light: { ...themes.light }
+  },
+  docs: {
+    container: props => {
+      const [isDark, setDark] = React.useState();
+
+      const onChangeHandler = () => {
+        channel.emit(UPDATE_DARK_MODE_EVENT_NAME);
+      };
+
+      React.useEffect(() => {
+        channel.on(DARK_MODE_EVENT_NAME, setDark);
+        return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+      }, [channel, setDark]);
+
+      return (
+        <div>
+          <input type="checkbox" onChange={onChangeHandler} />
+          <DocsContainer {...props} />
+        </div>
+      );
+    }
+  }
+};
+```
+
 ## Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -237,6 +285,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

src/Tool.tsx

@@ -8,7 +8,10 @@ import {
 } from '@storybook/core-events';
 import { API, useParameter } from '@storybook/api';
 import equal from 'fast-deep-equal';
-import { DARK_MODE_EVENT_NAME } from './constants';
+import {
+  DARK_MODE_EVENT_NAME,
+  UPDATE_DARK_MODE_EVENT_NAME
+} from './constants';
 
 import Sun from './icons/Sun';
 import Moon from './icons/Moon';
@@ -126,6 +129,8 @@ export const DarkMode = ({ api }: DarkModeProps) => {
   const darkModeParams = useParameter<Partial<DarkModeStore>>('darkMode', {});
   const { current: defaultMode, stylePreview, ...params } = darkModeParams
 
+  const channel = api.getChannel();
+
   // Save custom themes on init
   const initialMode = React.useMemo(() => store(params).current, [params]);
 
@@ -178,8 +183,6 @@ export const DarkMode = ({ api }: DarkModeProps) => {
   }, [darkModeParams, renderTheme])
 
   React.useEffect(() => {
-    const channel = api.getChannel();
-
     channel.on(STORY_CHANGED, renderTheme);
     channel.on(SET_STORIES, renderTheme);
     channel.on(DOCS_RENDERED, renderTheme);
@@ -193,6 +196,14 @@ export const DarkMode = ({ api }: DarkModeProps) => {
     };
   });
 
+  React.useEffect(() => {
+    channel.on(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
+
+    return () => {
+      channel.removeListener(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
+    };
+  });
+
   // Storybook's first render doesn't have the global user params loaded so we
   // need the effect to run whenever defaultMode is updated
   React.useEffect(() => {

src/constants.ts

@@ -1 +1,2 @@
 export const DARK_MODE_EVENT_NAME = 'DARK_MODE';
+export const UPDATE_DARK_MODE_EVENT_NAME = 'UPDATE_DARK_MODE';