Add dark mode to storybook (#107)

saleor · Jan 21, 2022 · 751fbb9 · 751fbb9 · vercel · Jan 21, 2022
1 parent 9f799e3
commit 751fbb9
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,7 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.tsx', '../src/**/*.stories.tsx'],
+  stories: ["../stories/**/*.stories.tsx", "../src/**/*.stories.tsx"],
   typescript: {
     check: true, // type-check stories during Storybook build
   },
+  addons: ["storybook-dark-mode"],
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -121,6 +121,7 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-is": "^17.0.2",
     "size-limit": "^4.10.2",
+    "storybook-dark-mode": "^1.0.8",
     "tslib": "^2.3.1",
     "typescript": "^4.2.4",
     "yargs": "^17.2.1"

diff --git a/src/utils/Decorator.tsx b/src/utils/Decorator.tsx
@@ -1,11 +1,12 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import React from "react";
+import { useDarkMode } from "storybook-dark-mode";
 
 import { ThemeProvider } from "../theme";
 
 export const Decorator = (storyFn: any) => (
-  <ThemeProvider>
+  <ThemeProvider defaultTheme={useDarkMode() ? "dark" : "light"}>
     <div
       style={{
         padding: 24,