Improve the dark mode toggle

enricoros · Jan 14, 2025 · b2a3b78 · b2a3b78
1 parent 135c957
commit b2a3b78
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/src/common/components/DarkModeToggleButton.tsx b/src/common/components/DarkModeToggleButton.tsx
@@ -16,11 +16,22 @@ export function DarkModeToggleButton(props: { hasText?: boolean }) {
   };
 
   return props.hasText ? (
-    <Button size='sm' variant='soft' color='neutral' onClick={handleToggleDarkMode} sx={{ ml: 'auto' }} startDecorator={colorMode !== 'dark' ? <DarkModeIcon /> : <LightModeIcon />}>
+    <Button
+      size='sm'
+      variant='soft'
+      color='neutral'
+      onClick={handleToggleDarkMode}
+      sx={{
+        ml: 'auto',
+        boxShadow: 'xs',
+        backgroundColor: 'background.surface',
+      }}
+      startDecorator={colorMode !== 'dark' ? <DarkModeIcon color='primary' /> : <LightModeIcon />}
+    >
       {colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}
     </Button>
   ) : (
-    <IconButton size="sm" variant="soft" onClick={handleToggleDarkMode} sx={{ ml: 'auto', /*mr: '2px',*/ my: '-0.25rem' /* absorb the menuItem padding */ }}>
+    <IconButton size='sm' variant='soft' onClick={handleToggleDarkMode} sx={{ ml: 'auto', /*mr: '2px',*/ my: '-0.25rem' /* absorb the menuItem padding */ }}>
       {colorMode !== 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
     </IconButton>
   );