adding toggle button, needs fix for reverse theme colors

.depcheckrc

@@ -30,6 +30,5 @@ ignores: [
   "react-dom",
   "remark-gfm",
   "rimraf",
-  "storybook-dark-mode",
   "webpack"
 ]

.storybook/main.ts

@@ -5,7 +5,6 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    // 'storybook-dark-mode',
   ],
   framework: '@storybook/react-vite',
 }

.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">
+<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

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 = {}

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>
+  )
+}

packages/invertible-theme/src/Buttons/index.ts

@@ -1 +1,2 @@
 export * from './DarkModeIconButton.tsx'
+export * from './ThemeModeButtonGroup.tsx'

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>
   )

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({})

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>