Merge pull request #106 from hipstersmoothie/6.0

Working on 6.0

package.json

@@ -22,22 +22,22 @@
     "release": "auto shipit"
   },
   "peerDependencies": {
-    "@storybook/addons": ">= 5.x",
-    "@storybook/api": ">= 5.x",
-    "@storybook/components": ">= 5.x",
-    "@storybook/core-events": ">= 5.x",
-    "@storybook/theming": ">= 5.x"
+    "@storybook/addons": ">= 6.x",
+    "@storybook/api": ">= 6.x",
+    "@storybook/components": ">= 6.x",
+    "@storybook/core-events": ">= 6.x",
+    "@storybook/theming": ">= 6.x"
   },
   "dependencies": {
     "fast-deep-equal": "^3.0.0",
     "memoizerific": "^1.11.3"
   },
   "devDependencies": {
-    "@storybook/addons": "5.3.8",
-    "@storybook/api": "5.3.8",
-    "@storybook/components": "5.3.8",
-    "@storybook/core-events": "5.3.8",
-    "@storybook/theming": "5.3.8",
+    "@storybook/addons": "6.0.5",
+    "@storybook/api": "6.0.5",
+    "@storybook/components": "6.0.5",
+    "@storybook/core-events": "6.0.5",
+    "@storybook/theming": "6.0.5",
     "@types/react": "16.9.11",
     "@typescript-eslint/eslint-plugin": "2.17.0",
     "@typescript-eslint/parser": "2.17.0",

src/Tool.tsx

@@ -3,7 +3,7 @@ import { themes, ThemeVars } from '@storybook/theming';
 import { IconButton } from '@storybook/components';
 import {
   STORY_CHANGED,
-  STORIES_CONFIGURED,
+  SET_STORIES,
   DOCS_RENDERED
 } from '@storybook/core-events';
 import { API, useParameter } from '@storybook/api';
@@ -32,7 +32,7 @@ interface DarkModeStore {
 }
 
 const STORAGE_KEY = 'sb-addon-themes-3';
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+export const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
 
 const defaultParams: Required<Omit<DarkModeStore, 'current'>> = {
   dark: themes.dark,
@@ -43,7 +43,7 @@ const defaultParams: Required<Omit<DarkModeStore, 'current'>> = {
 };
 
 /** Persist the dark mode settings in localStorage */
-const updateStore = (newStore: DarkModeStore) => {
+export const updateStore = (newStore: DarkModeStore) => {
   window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
 };
 
@@ -167,13 +167,13 @@ export const DarkMode = ({ api }: DarkModeProps) => {
     const channel = api.getChannel();
 
     channel.on(STORY_CHANGED, renderTheme);
-    channel.on(STORIES_CONFIGURED, renderTheme);
+    channel.on(SET_STORIES, renderTheme);
     channel.on(DOCS_RENDERED, renderTheme);
     prefersDark.addListener(prefersDarkUpdate);
 
     return () => {
       channel.removeListener(STORY_CHANGED, renderTheme);
-      channel.removeListener(STORIES_CONFIGURED, renderTheme);
+      channel.removeListener(SET_STORIES, renderTheme);
       channel.removeListener(DOCS_RENDERED, renderTheme);
       prefersDark.removeListener(prefersDarkUpdate);
     };

src/register.tsx

@@ -1,7 +1,16 @@
 import addons, { types } from '@storybook/addons';
 import * as React from 'react';
 
-import Tool from './Tool';
+import Tool, { prefersDark, store } from './Tool';
+
+const currentStore = store();
+
+addons.setConfig({
+  theme:
+    currentStore[
+      currentStore.current || (prefersDark.matches && 'dark') || 'light'
+    ]
+});
 
 addons.register('storybook/dark-mode', api => {
   addons.add('storybook/dark-mode', {