From 751fbb9ddc9c482db1b91c05679cc2f4521d88c8 Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Fri, 21 Jan 2022 10:17:41 +0100
Subject: [PATCH] Add dark mode to storybook (#107)

---
 .storybook/main.js      |  3 ++-
 package-lock.json       | 10 ++++++++++
 package.json            |  1 +
 src/utils/Decorator.tsx |  3 ++-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index b7ade03c..b37a468e 100644
--- 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
index e6e8751d..7a3fcc63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24074,6 +24074,16 @@
       "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==",
       "dev": true
     },
+    "storybook-dark-mode": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-1.0.8.tgz",
+      "integrity": "sha512-uY6yTSd1vYE0YwlON50u+iIoNF/fmMj59ww1cpd/naUcmOmCjwawViKFG5YjichwdR/yJ5ybWRUF0tnRQfaSiw==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.0.0",
+        "memoizerific": "^1.11.3"
+      }
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
diff --git a/package.json b/package.json
index 9db13778..f00f8112 100644
--- 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
index dde16345..b71fcbec 100644
--- 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,