From 07205592d14846d72cb67952647f4e458278c224 Mon Sep 17 00:00:00 2001
From: Matt Jones <885417+jonesmac@users.noreply.github.com>
Date: Thu, 18 Jan 2024 16:01:38 -0500
Subject: [PATCH] customizable default mode colors

---
 .../src/Buttons/DarkModeIconButton.tsx        | 23 +++++++++++++++----
 .../InvertibleCssVarsProvider.stories.tsx     |  2 +-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/invertible-theme/src/Buttons/DarkModeIconButton.tsx b/packages/invertible-theme/src/Buttons/DarkModeIconButton.tsx
index f484df1e..c7fdafb8 100644
--- a/packages/invertible-theme/src/Buttons/DarkModeIconButton.tsx
+++ b/packages/invertible-theme/src/Buttons/DarkModeIconButton.tsx
@@ -8,17 +8,30 @@ import { useColorSchemeEx } from '../CssVarsProvider'
 
 type iconColor = IconButtonProps['color']
 
-export interface DarkModeIconButtonProps extends IconButtonProps {
+interface DefaultModeColors {
+  defaultDarkModeColor?: IconButtonProps['color']
+  defaultLightModeColor?: IconButtonProps['color']
+}
+
+export interface DarkModeIconButtonProps extends IconButtonProps, DefaultModeColors {
   darkMode?: boolean
   toggleMode?: () => void
 }
 
-export const DarkModeIconButton: React.FC<DarkModeIconButtonProps> = ({ darkMode, toggleMode, ...props }) => {
+export const DarkModeIconButton: React.FC<DarkModeIconButtonProps> = ({
+  darkMode,
+  defaultDarkModeColor,
+  defaultLightModeColor,
+  toggleMode,
+  ...props
+}) => {
   const [iconColor, setIconColor] = useState<iconColor>('inherit')
   const [iconColorIsSet, setIconColorIsSet] = useState(false)
+  const darkModeIconColor = defaultDarkModeColor ?? 'inherit'
+  const lightModeIconColor = defaultLightModeColor ?? 'inherit'
 
   const handleHover = () => {
-    setIconColor(darkMode ? (iconColorIsSet ? 'inherit' : 'info') : iconColorIsSet ? 'inherit' : 'warning')
+    setIconColor(darkMode ? (iconColorIsSet ? darkModeIconColor : 'info') : iconColorIsSet ? lightModeIconColor : 'warning')
     setIconColorIsSet(!iconColorIsSet)
   }
 
@@ -37,7 +50,9 @@ export const DarkModeIconButton: React.FC<DarkModeIconButtonProps> = ({ darkMode
   )
 }
 
-export const DarkModeIconButtonForColorScheme: React.FC<IconButtonProps> = (props) => {
+export interface DarkModeIconButtonForColorSchemeProps extends DefaultModeColors, IconButtonProps {}
+
+export const DarkModeIconButtonForColorScheme: React.FC<DarkModeIconButtonForColorSchemeProps> = (props) => {
   const { darkMode, setMode } = useColorSchemeEx()
   const toggleMode = () => setMode(darkMode ? 'light' : 'dark')
 
diff --git a/packages/invertible-theme/src/CssVarsProvider/InvertibleCssVarsProvider.stories.tsx b/packages/invertible-theme/src/CssVarsProvider/InvertibleCssVarsProvider.stories.tsx
index 277a0ddf..6a338749 100644
--- a/packages/invertible-theme/src/CssVarsProvider/InvertibleCssVarsProvider.stories.tsx
+++ b/packages/invertible-theme/src/CssVarsProvider/InvertibleCssVarsProvider.stories.tsx
@@ -38,7 +38,7 @@ const ThemeEnabledComponent = () => {
           </Button>
           <Button onClick={() => setMode('system')}>System</Button>
         </ButtonGroup>
-        <Stack direction={'row'} gap={1}><p>DarkModeIconButton:</p><DarkModeIconButtonForColorScheme /></Stack>
+        <Stack direction={'row'} gap={1}><p>DarkModeIconButton:</p><DarkModeIconButtonForColorScheme defaultLightModeColor={'default'} /></Stack>
         <Box sx={{ backgroundColor: theme.palette.background.default }}>
           <Box padding={3} border={`1px dotted ${theme.palette.divider}`}>
             <Typography variant="h3">marginBottom of {theme.spacing(4)}</Typography>