From ef7e749882daa7ebde5e5a2c3af7a40aa6210d5b Mon Sep 17 00:00:00 2001
From: Jordan Trouw <jordan.trouw@gmail.com>
Date: Fri, 22 Nov 2024 18:12:42 -0800
Subject: [PATCH] adding toggle button, needs fix for reverse theme colors

---
 .depcheckrc                                   |  1 -
 .storybook/main.ts                            |  1 -
 .storybook/preview-head.html                  |  3 +-
 .../Buttons/ThemeModeButtonGroup.stories.tsx  | 32 +++++++
 .../src/Buttons/ThemeModeButtonGroup.tsx      | 42 ++++++++++
 .../invertible-theme/src/Buttons/index.ts     |  1 +
 packages/theme/src/ColorCard.tsx              |  5 +-
 packages/theme/src/ColorShowcase.stories.tsx  | 12 ++-
 packages/theme/src/ColorShowcase.tsx          | 58 +++++++++----
 .../theme/src/PaletteColorCard.stories.tsx    | 29 -------
 packages/theme/src/PaletteColorCard.tsx       | 37 ---------
 packages/theme/src/ThemeShowcase.tsx          | 83 ++++++++++++++++++-
 .../theme/src/dataism/darkThemePalette.tsx    |  6 +-
 .../theme/src/dataism/lightThemePalette.tsx   |  6 +-
 .../theme/src/xylabs/darkThemeOptions.tsx     | 13 ++-
 .../theme/src/xylabs/lightThemeOptions.tsx    | 15 ++--
 packages/theme/src/xylabs/theme.tsx           | 12 +--
 .../src/xyo-website/darkThemeOptions.tsx      |  3 +-
 18 files changed, 239 insertions(+), 120 deletions(-)
 create mode 100644 packages/invertible-theme/src/Buttons/ThemeModeButtonGroup.stories.tsx
 create mode 100644 packages/invertible-theme/src/Buttons/ThemeModeButtonGroup.tsx
 delete mode 100644 packages/theme/src/PaletteColorCard.stories.tsx
 delete mode 100644 packages/theme/src/PaletteColorCard.tsx

diff --git a/.depcheckrc b/.depcheckrc
index c50b7544..2d8be270 100644
--- a/.depcheckrc
+++ b/.depcheckrc
@@ -30,6 +30,5 @@ ignores: [
   "react-dom",
   "remark-gfm",
   "rimraf",
-  "storybook-dark-mode",
   "webpack"
 ]
\ No newline at end of file
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 7912680e..0fd3a5e1 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -5,7 +5,6 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    // 'storybook-dark-mode',
   ],
   framework: '@storybook/react-vite',
 }
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 7bff02a0..1243e2f4 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -6,5 +6,4 @@
   rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Fustat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700&display=swap"
-  rel="stylesheet">
\ No newline at end of file
+<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
\ No newline at end of file
diff --git a/packages/invertible-theme/src/Buttons/ThemeModeButtonGroup.stories.tsx b/packages/invertible-theme/src/Buttons/ThemeModeButtonGroup.stories.tsx
new file mode 100644
index 00000000..8703eec7
--- /dev/null
+++ b/packages/invertible-theme/src/Buttons/ThemeModeButtonGroup.stories.tsx
@@ -0,0 +1,32 @@
+import { CssBaseline, ThemeProvider } from '@mui/material'
+import { createTheme } from '@mui/material/styles'
+import React from 'react'
+
+import { InvertibleMuiThemeProvider } from '../InvertibleMuiThemeProvider/index.ts'
+import { ThemeModeButtonGroup } from './ThemeModeButtonGroup.tsx'
+
+export default {
+  title: 'Theme/ThemeModeButtonGroup',
+  component: ThemeModeButtonGroup,
+  parameters: { layout: 'fullscreen' },
+}
+
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: { main: '#2c5ba8' },
+    secondary: { main: '#ffb300' },
+  },
+})
+
+const Template = () => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    <InvertibleMuiThemeProvider>
+      <ThemeModeButtonGroup />
+    </InvertibleMuiThemeProvider>
+  </ThemeProvider>
+)
+
+export const Default = Template.bind({})
+Default.args = {}
diff --git a/packages/invertible-theme/src/Buttons/ThemeModeButtonGroup.tsx b/packages/invertible-theme/src/Buttons/ThemeModeButtonGroup.tsx
new file mode 100644
index 00000000..ff44404b
--- /dev/null
+++ b/packages/invertible-theme/src/Buttons/ThemeModeButtonGroup.tsx
@@ -0,0 +1,42 @@
+import {
+  Button, ButtonGroup, Chip, Stack,
+} from '@mui/material'
+import React from 'react'
+
+import { useColorSchemeEx } from '../InvertibleMuiThemeProvider/index.ts'
+
+export const ThemeModeButtonGroup: React.FC = () => {
+  const {
+    darkMode, lightMode, systemMode, mode, setMode,
+  } = useColorSchemeEx()
+
+  return (
+    <Stack direction="column" gap={2} alignItems="start">
+      <Stack direction="row" gap={2}>
+        Current Mode:
+        {' '}
+        <Chip label={mode} />
+      </Stack>
+      <ButtonGroup>
+        <Button
+          variant={darkMode ? 'contained' : 'outlined'}
+          onClick={() => setMode('dark')}
+        >
+          Dark Mode
+        </Button>
+        <Button
+          variant={lightMode ? 'contained' : 'outlined'}
+          onClick={() => setMode('light')}
+        >
+          Light Mode
+        </Button>
+        <Button
+          variant={systemMode ? 'contained' : 'outlined'}
+          onClick={() => setMode('system')}
+        >
+          System
+        </Button>
+      </ButtonGroup>
+    </Stack>
+  )
+}
diff --git a/packages/invertible-theme/src/Buttons/index.ts b/packages/invertible-theme/src/Buttons/index.ts
index 88eda837..8f8b1a0c 100644
--- a/packages/invertible-theme/src/Buttons/index.ts
+++ b/packages/invertible-theme/src/Buttons/index.ts
@@ -1 +1,2 @@
 export * from './DarkModeIconButton.tsx'
+export * from './ThemeModeButtonGroup.tsx'
diff --git a/packages/theme/src/ColorCard.tsx b/packages/theme/src/ColorCard.tsx
index f75ae2bb..39f6d66e 100644
--- a/packages/theme/src/ColorCard.tsx
+++ b/packages/theme/src/ColorCard.tsx
@@ -6,13 +6,12 @@ import {
 import React from 'react'
 
 export interface ColorCardProps extends BoxProps {
-  color: string
   colorName: string
   subtype?: string
 }
 
 export const ColorCard: React.FC<ColorCardProps> = ({
-  color, colorName, subtype, ...props
+  colorName, subtype, ...props
 }) => {
   return (
     <Box
@@ -30,7 +29,7 @@ export const ColorCard: React.FC<ColorCardProps> = ({
         </Typography>
       </Box>
       <Typography alignSelf="flex-end" variant="caption">
-        {color}
+        {colorName}
       </Typography>
     </Box>
   )
diff --git a/packages/theme/src/ColorShowcase.stories.tsx b/packages/theme/src/ColorShowcase.stories.tsx
index e69998f9..4b0b17a3 100644
--- a/packages/theme/src/ColorShowcase.stories.tsx
+++ b/packages/theme/src/ColorShowcase.stories.tsx
@@ -1,5 +1,6 @@
-import { Box } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react'
+import { ThemeModeButtonGroup } from '@xylabs/react-invertible-theme'
 import React from 'react'
 
 import { ColorShowcase } from './ColorShowcase.tsx'
@@ -12,9 +13,12 @@ const StorybookEntry = {
 } as Meta<typeof ColorShowcase>
 
 const Template: StoryFn<typeof ColorShowcase> = () => (
-  <Box display="flex" height="100vh" width="100vw">
-    <ColorShowcase></ColorShowcase>
-  </Box>
+  <Stack display="flex" flexDirection="column" gap={2} alignItems="stretch" height="100vh" width="100vw">
+    <Box alignSelf="center">
+      <ThemeModeButtonGroup />
+    </Box>
+    <ColorShowcase />
+  </Stack>
 )
 
 const Default = Template.bind({})
diff --git a/packages/theme/src/ColorShowcase.tsx b/packages/theme/src/ColorShowcase.tsx
index 1f8c46af..e19a43bb 100644
--- a/packages/theme/src/ColorShowcase.tsx
+++ b/packages/theme/src/ColorShowcase.tsx
@@ -2,46 +2,72 @@ import {
   Box,
   useTheme,
 } from '@mui/material'
+import { DarkModeIconButtonForColorScheme } from '@xylabs/react-invertible-theme'
 import React from 'react'
 
 import { ColorCard } from './ColorCard.tsx'
-import { PaletteColorCard } from './PaletteColorCard.tsx'
 
 export const ColorShowcase: React.FC = () => {
   const theme = useTheme()
 
   return (
     <Box display="flex" flexDirection="column" flex="1 1 0px">
+      <DarkModeIconButtonForColorScheme defaultLightModeColor="default" />
       <Box display="flex" flex="1 1 0px" flexDirection="row" justifyContent="stretch">
         <ColorCard
-          bgcolor={theme.palette.background.default}
-          color={theme.palette.background.default as string}
+          style={{ background: theme.palette.background.gradient }}
+          color={theme.palette.background.gradient}
           colorName="Background"
-          subtype="default"
+          subtype="Gradient"
         />
         <ColorCard
-          bgcolor={theme.palette.background.paper}
-          color={theme.palette.background.paper as string}
+          bgcolor={theme.palette.text.primary}
+          color={theme.palette.background.default}
           colorName="Background"
-          subtype="paper"
+          subtype="Default"
         />
         <ColorCard
-          bgcolor={theme.palette.background.gradient}
-          color={theme.palette.background.gradient as string}
-          colorName="Gradient"
+          bgcolor={theme.palette.text.primary}
+          color={theme.palette.background.paper}
+          colorName="Background"
+          subtype="Paper"
         />
       </Box>
       <Box display="flex" flex="1 1 0px" flexDirection="row" justifyContent="stretch">
-        <PaletteColorCard color={theme.palette.primary} colorName="Primary" subtype="main" />
-        <PaletteColorCard color={theme.palette.secondary} colorName="Secondary" subtype="main" />
+        <ColorCard
+          color={theme.palette.primary.contrastText}
+          bgcolor={theme.palette.primary.main}
+          colorName="Primary"
+        />
+        <ColorCard
+          color={theme.palette.secondary.contrastText}
+          bgcolor={theme.palette.secondary.main}
+          colorName="Secondary"
+        />
         <Box display="flex" flex="1 1 0px" flexDirection="column">
           <Box display="flex" flex="1 1 0px" flexDirection="row">
-            <PaletteColorCard color={theme.palette.info} colorName="Info" subtype="main" />
-            <PaletteColorCard color={theme.palette.success} colorName="Success" subtype="main" />
+            <ColorCard
+              color={theme.palette.info.contrastText}
+              bgcolor={theme.palette.info.main}
+              colorName="Info"
+            />
+            <ColorCard
+              color={theme.palette.success.contrastText}
+              bgcolor={theme.palette.success.main}
+              colorName="Success"
+            />
           </Box>
           <Box display="flex" flex="1 1 0px" flexDirection="row">
-            <PaletteColorCard color={theme.palette.warning} colorName="Warning" subtype="main" />
-            <PaletteColorCard color={theme.palette.error} colorName="Error" subtype="main" />
+            <ColorCard
+              color={theme.palette.warning.contrastText}
+              bgcolor={theme.palette.warning.main}
+              colorName="Warning"
+            />
+            <ColorCard
+              color={theme.palette.error.contrastText}
+              bgcolor={theme.palette.error.main}
+              colorName="Error"
+            />
           </Box>
         </Box>
       </Box>
diff --git a/packages/theme/src/PaletteColorCard.stories.tsx b/packages/theme/src/PaletteColorCard.stories.tsx
deleted file mode 100644
index 9351a332..00000000
--- a/packages/theme/src/PaletteColorCard.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Box, useTheme } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react'
-import React from 'react'
-
-import type { PaletteColorCardProps } from './PaletteColorCard.tsx'
-import { PaletteColorCard } from './PaletteColorCard.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: PaletteColorCard,
-  parameters: { docs: { page: null }, layout: 'fullscreen' },
-  title: 'Theme/PaletteColorCard',
-} as Meta<typeof PaletteColorCard>
-
-const Template: StoryFn<typeof PaletteColorCard> = (args: PaletteColorCardProps) => {
-  const theme = useTheme()
-  return (
-    <Box display="flex" height="100vh" width="100vw">
-      <PaletteColorCard {...args} color={theme.palette.primary} />
-    </Box>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = { colorName: 'Primary', subtype: 'main' }
-
-export { Default }
-
-export default StorybookEntry
diff --git a/packages/theme/src/PaletteColorCard.tsx b/packages/theme/src/PaletteColorCard.tsx
deleted file mode 100644
index 606b7e16..00000000
--- a/packages/theme/src/PaletteColorCard.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type {
-  Palette, PaletteColorOptions, PaletteOptions, SimplePaletteColorOptions,
-  TypeBackground,
-} from '@mui/material'
-import {
-  Box,
-  Typography, useTheme,
-} from '@mui/material'
-import React from 'react'
-
-export interface PaletteColorCardProps {
-  color: SimplePaletteColorOptions
-  colorName: string
-  subtype: keyof SimplePaletteColorOptions
-}
-
-export const PaletteColorCard: React.FC<PaletteColorCardProps> = ({
-  color, colorName, subtype,
-}) => {
-  const theme = useTheme()
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      justifyContent="space-between"
-      flex="1 1 0px"
-      bgcolor={color[subtype]}
-      padding={2}
-    >
-      <Box flexDirection="column">
-        <Typography variant="caption" color={color.contrastText}>{subtype}</Typography>
-        <Typography variant="h6" color={color.contrastText}>{colorName}</Typography>
-      </Box>
-      <Typography alignSelf="flex-end" variant="caption" color={color.contrastText}>{color[subtype]?.toString()}</Typography>
-    </Box>
-  )
-}
diff --git a/packages/theme/src/ThemeShowcase.tsx b/packages/theme/src/ThemeShowcase.tsx
index a3a98813..c8f92696 100644
--- a/packages/theme/src/ThemeShowcase.tsx
+++ b/packages/theme/src/ThemeShowcase.tsx
@@ -1,15 +1,92 @@
 import {
-  Box,
+  Button, Stack,
   Typography,
 } from '@mui/material'
 import React from 'react'
 
 export const ThemeShowcase: React.FC = () => {
   return (
-    <Box>
+    <Stack gap={2}>
       <Typography variant="h4" gutterBottom>
         XYO Website Theme Showcase
       </Typography>
-    </Box>
+      <Stack flexDirection="row" gap={2}>
+        <Button color="primary" variant="contained">
+          Primary
+        </Button>
+        <Button color="primary" variant="outlined">
+          Primary
+        </Button>
+        <Button color="primary" variant="text">
+          Primary
+        </Button>
+      </Stack>
+      <Stack flexDirection="row" gap={2}>
+        <Button color="secondary" variant="contained">
+          Secondary
+        </Button>
+        <Button color="secondary" variant="outlined">
+          Secondary
+        </Button>
+        <Button color="secondary" variant="text">
+          Secondary
+        </Button>
+      </Stack>
+      <Stack flexDirection="row" gap={2}>
+        <Button color="success" variant="contained">
+          Success
+        </Button>
+        <Button color="success" variant="outlined">
+          Success
+        </Button>
+        <Button color="success" variant="text">
+          Success
+        </Button>
+      </Stack>
+      <Stack flexDirection="row" gap={2}>
+        <Button color="info" variant="contained">
+          Info
+        </Button>
+        <Button color="info" variant="outlined">
+          Info
+        </Button>
+        <Button color="info" variant="text">
+          Info
+        </Button>
+      </Stack>
+      <Stack flexDirection="row" gap={2}>
+        <Button color="warning" variant="contained">
+          Warning
+        </Button>
+        <Button color="warning" variant="outlined">
+          Warning
+        </Button>
+        <Button color="warning" variant="text">
+          Warning
+        </Button>
+      </Stack>
+      <Stack flexDirection="row" gap={2}>
+        <Button color="error" variant="contained">
+          Error
+        </Button>
+        <Button color="error" variant="outlined">
+          Error
+        </Button>
+        <Button color="error" variant="text">
+          Error
+        </Button>
+      </Stack>
+      <Stack flexDirection="row" gap={2}>
+        <Button color="neutral" variant="contained">
+          Neutral
+        </Button>
+        <Button color="neutral" variant="outlined">
+          Neutral
+        </Button>
+        <Button color="neutral" variant="text">
+          Neutral
+        </Button>
+      </Stack>
+    </Stack>
   )
 }
diff --git a/packages/theme/src/dataism/darkThemePalette.tsx b/packages/theme/src/dataism/darkThemePalette.tsx
index 890d4e91..0c6d1878 100644
--- a/packages/theme/src/dataism/darkThemePalette.tsx
+++ b/packages/theme/src/dataism/darkThemePalette.tsx
@@ -3,9 +3,11 @@ import type { ColorSystemOptions } from '@mui/material'
 import { personaColorsDarkMode } from './customThemeColors.tsx'
 
 export const darkThemePalette: ColorSystemOptions['palette'] = {
-  background: { paper: '#1E1E1E', gradient: 'linear-gradient(to right, #fff, #66caf7)' },
+  background: {
+    paper: '#1E1E1E',
+    gradient: 'linear-gradient(to right, #fff, #000)',
+  },
   info: { main: '#72b4f4' },
-  mode: 'dark',
   primary: { main: '#fff' },
   secondary: {
     main: '#66caf7',
diff --git a/packages/theme/src/dataism/lightThemePalette.tsx b/packages/theme/src/dataism/lightThemePalette.tsx
index 944cb176..67550f52 100644
--- a/packages/theme/src/dataism/lightThemePalette.tsx
+++ b/packages/theme/src/dataism/lightThemePalette.tsx
@@ -3,9 +3,11 @@ import type { ColorSystemOptions } from '@mui/material'
 import { personaColorsLightMode } from './customThemeColors.tsx'
 
 export const lightThemePalette: ColorSystemOptions['palette'] = {
-  background: { paper: '#FAFAFA', gradient: 'linear-gradient(to right, #000, #186ecc)' },
+  background: {
+    paper: '#FAFAFA',
+    gradient: 'linear-gradient(to right, #000, #fff)',
+  },
   info: { main: '#72b4f4' },
-  mode: 'light',
   primary: { main: '#000' },
   secondary: { main: '#186ecc' },
   success: { main: '#48BA4B', contrastText: '#fff' },
diff --git a/packages/theme/src/xylabs/darkThemeOptions.tsx b/packages/theme/src/xylabs/darkThemeOptions.tsx
index ec6465ee..e854a350 100644
--- a/packages/theme/src/xylabs/darkThemeOptions.tsx
+++ b/packages/theme/src/xylabs/darkThemeOptions.tsx
@@ -5,9 +5,18 @@ export const darkThemeOptions: ThemeOptions = {
     background: {
       default: '#0b0f30',
       paper: '#101742',
-      gradient: 'linear-gradient(to right, #384AFD, #FFC91D)',
+      gradient: 'linear-gradient(to right, #384AFD, #0b0f30)',
+    },
+    primary: {
+      dark: '#010965',
+      light: '#EBECFF',
+      main: '#384AFD',
+    },
+    secondary: {
+      dark: '#AD8E13',
+      light: '#F9D549',
+      main: '#FFC91D',
     },
-    mode: 'dark',
     text: {
       disabled: '#a5acdb',
       primary: '#f7f8fc',
diff --git a/packages/theme/src/xylabs/lightThemeOptions.tsx b/packages/theme/src/xylabs/lightThemeOptions.tsx
index 51cee01c..26f04e4e 100644
--- a/packages/theme/src/xylabs/lightThemeOptions.tsx
+++ b/packages/theme/src/xylabs/lightThemeOptions.tsx
@@ -2,9 +2,10 @@ import type { ThemeOptions } from '@mui/material'
 
 export const lightThemeOptions: ThemeOptions = {
   palette: {
-    background: { gradient: 'linear-gradient(to right, #384AFD, #FFC91D)' },
-    info: { main: '#2733B1' },
-    mode: 'light',
+    background: {
+      default: '#fafafa',
+      gradient: 'linear-gradient(to right, #384AFD, #010965)',
+    },
     primary: {
       dark: '#010965',
       light: '#EBECFF',
@@ -15,10 +16,10 @@ export const lightThemeOptions: ThemeOptions = {
       light: '#F9D549',
       main: '#FFC91D',
     },
-    success: {
-      contrastText: '#142B12',
-      main: '#76C46D',
-    },
+    error: { main: '#CC183C', contrastText: '#FDEDF0' },
+    info: { main: '#186ecc', contrastText: '#DAEAFB' },
+    success: { main: '#7efc81', contrastText: '#142B12' },
+    warning: { main: '#F4813E', contrastText: '#271002' },
     text: { primary: '#1F2025' },
   },
 }
diff --git a/packages/theme/src/xylabs/theme.tsx b/packages/theme/src/xylabs/theme.tsx
index aeb084a4..7e0a37c5 100644
--- a/packages/theme/src/xylabs/theme.tsx
+++ b/packages/theme/src/xylabs/theme.tsx
@@ -33,16 +33,13 @@ export const XyLabsTheme: Theme = createTheme({
   shape: { borderRadius: 4 },
   spacing: 12,
   typography: {
-    body1: {
-      fontSize: '1.1rem',
-      fontWeight: 300,
-    },
+    fontFamily: '"Outfit", sans-serif',
+    body1: { fontSize: '1.1rem' },
     button: {
       fontSize: '1rem',
       fontWeight: 500,
       textTransform: 'capitalize',
     },
-
     fontWeightBold: 700,
     fontWeightLight: 300,
     fontWeightMedium: 400,
@@ -52,10 +49,7 @@ export const XyLabsTheme: Theme = createTheme({
     h3: { fontSize: '2.24rem' },
     h4: { fontSize: '2rem' },
     h5: { fontSize: '1.5rem' },
-    h6: {
-      fontSize: '1.25rem',
-      fontWeight: 300,
-    },
+    h6: { fontSize: '1.25rem' },
     subtitle1: {
       opacity: '50%',
       textTransform: 'uppercase',
diff --git a/packages/theme/src/xyo-website/darkThemeOptions.tsx b/packages/theme/src/xyo-website/darkThemeOptions.tsx
index d3d4826c..740fbd8e 100644
--- a/packages/theme/src/xyo-website/darkThemeOptions.tsx
+++ b/packages/theme/src/xyo-website/darkThemeOptions.tsx
@@ -2,7 +2,7 @@ import {
   alpha, lighten, type ThemeOptions,
 } from '@mui/material'
 
-import { neutralButtonStylesContained, neutralButtonStylesOutlined } from '../ThemeExtensions/customThemeColors.ts'
+import { neutralButtonStylesContained, neutralButtonStylesOutlined } from '../ThemeExtensions/index.ts'
 
 export const darkThemeOptions: ThemeOptions = {
   palette: {
@@ -16,7 +16,6 @@ export const darkThemeOptions: ThemeOptions = {
       contrastText: '#000',
     },
     info: { main: '#72b4f4' },
-    mode: 'dark',
     primary: { main: '#5658F3' },
     secondary: {
       main: '#66caf7',