Update to use storybook-dark-mode (#317)

.storybook/main.js

@@ -18,7 +18,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-storysource',
-    '@nox/addon-themes/dist/register',
+    'storybook-dark-mode',
   ],
   webpackFinal: (config) => {
     config.module.rules.push(storySource);

.storybook/preview.js

@@ -1,20 +1,21 @@
 import { themes } from './themes';
-import {
-  ThemedStory,
-  addThemes,
-} from '@nox/addon-themes/dist/utilities';
+import { themes as IrisTheme } from '../src/themes';
 
 import { GlobalStyles } from '../src/utils';
 import { useEffect, useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { useDarkMode } from 'storybook-dark-mode';
 
-addThemes(themes);
+// addThemes(themes);
 
 export const decorators = [
   (Story) => (
-    <ThemedStory>
+    <ThemeProvider
+      theme={useDarkMode() ? IrisTheme.dark : IrisTheme.light}
+    >
       <GlobalStyles />
       <ForceClientSideRender>{Story()}</ForceClientSideRender>
-    </ThemedStory>
+    </ThemeProvider>
   ),
 ];
 
@@ -531,4 +532,8 @@ export const parameters = {
     expanded: true,
     hideNoControlsWarning: true,
   },
+  darkMode: {
+    dark: { ...themes.dark, stylePreview: true },
+    light: { ...themes.light, stylePreview: true },
+  },
 };

package.json

@@ -26,7 +26,6 @@
     "@babel/preset-env": "^7.22.7",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@nox/addon-themes": "^1.1.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -86,6 +85,7 @@
     "rollup-plugin-multi-input": "^1.4.1",
     "rollup-plugin-terser": "^7.0.2",
     "storybook": "7.0.26",
+    "storybook-dark-mode": "^3.0.1",
     "styled-components": "^5.3.11",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^4.0.0",