From c2e2c9363f5c75ab03c7828ad5e2e455059209ba Mon Sep 17 00:00:00 2001
From: Himanshu Mishra <himanshu@orkohunter.net>
Date: Mon, 20 Apr 2020 17:19:13 +0900
Subject: [PATCH] Check if dark mode is enabled and toggle

Storybook components are wrapped using a decorator in the storybook config. When rendering, useDarkMode() will let the component know which theme (dark/light) to thoose.
---
 packages/storybook/.storybook/config.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/storybook/.storybook/config.js b/packages/storybook/.storybook/config.js
index b9962b5bd3..050fac71ea 100644
--- a/packages/storybook/.storybook/config.js
+++ b/packages/storybook/.storybook/config.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import { addDecorator } from '@storybook/react';
-import { lightTheme } from '@backstage/theme';
+import { lightTheme, darkTheme } from '@backstage/theme';
 import { CssBaseline, ThemeProvider } from '@material-ui/core';
+import { useDarkMode } from 'storybook-dark-mode';
 
 addDecorator(story => (
-  <ThemeProvider theme={lightTheme}>
+  <ThemeProvider theme={useDarkMode() ? darkTheme : lightTheme}>
     <CssBaseline>{story()}</CssBaseline>
   </ThemeProvider>
 ));