customizable default mode colors

xylabs · Jan 18, 2024 · 0720559 · 0720559
1 parent 4016439
commit 0720559
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git 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
@@ -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>