Implemented toolbar action to allow users to toggle dark mode for com…

…ponents

.storybook/preview.js

@@ -3,32 +3,42 @@ import ItemProvider from '../src/components/ItemProvider';
 import { ThemeProvider } from "@material-ui/core/styles";
 import webqueueTheme from "../src/theme";
 
-const theme = webqueueTheme(false);
+
+
 
 export const globalTypes = {
   theme: {
-    name: 'Theme',
+    name: 'Set Dark Mode',
     description: 'Global theme for components',
-    defaultValue: 'false',
+    defaultValue: false,
     toolbar: {
       icon: 'mirror',
-      // array of plain string values or MenuItem shape (see below)
-      items: ["light", "dark"],
+      items: [
+        {value:true, title: "Dark Mode active",},
+        {value:false, title: "Dark Mode off",}
+      ],
     },
   },
 };
 
+
+const withThemeProvider = (Story, context) => {
+
+  const theme = webqueueTheme(context.globals.theme);
+  return (
+    <ThemeProvider theme={theme} >
+      <Story {...context} />
+    </ThemeProvider>
+  )
+}
+
 export const decorators = [
   (Story) => (
     <ItemProvider>
       <Story />
     </ItemProvider>
   ),
-  (Story, context) => (
-    <ThemeProvider theme={theme}>
-      <Story {...context} />
-    </ThemeProvider>
-  ),
+  withThemeProvider
 ];
 
 export const parameters = {
@@ -38,6 +48,11 @@ export const parameters = {
       method: 'alphabetical',
       order: ['Introduction', 'Components']
     },
-
+  },
+  backgrounds: {
+    values: [
+      { name: 'red', value: '#f00' },
+      { name: 'green', value: '#0f0' },
+    ],
   },
 }