Tweak dark mode switch colors to better suit system thememode that re…

…solves to light mode
mobeigi · Oct 22, 2024 · b7a3481 · b7a3481
1 parent 0db59ff
commit b7a3481
Showing 1 changed file with 5 additions and 10 deletions.
diff --git a/app/src/components/HeaderContent/DarkModeSwitchContainer/DarkModeSwitchContainer.tsx b/app/src/components/HeaderContent/DarkModeSwitchContainer/DarkModeSwitchContainer.tsx
@@ -9,10 +9,10 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { useTheme } from 'next-themes';
 import { nextThemeToThemeMode } from '@/utils/theme';
 
-export const customColors = {
-  halfSunLeftFill: '#ffca00',
-  halfSunLeftStroke: '#ffca00',
-  halfSunLeftBeamStroke: '#ffe873',
+const customColors = {
+  halfSunLeftFill: '#ebd75b',
+  halfSunLeftStroke: '#ebd75b',
+  halfSunLeftBeamStroke: '#e3cc42',
   halfMoonRightFill: '#44415d',
   halfMoonRightStroke: '#44415d',
   halfMoonRightBeamStroke: '#c0b9c7',
@@ -65,8 +65,7 @@ export const DarkModeSwitchContainer = () => {
   const [mounted, setMounted] = useState(false);
 
   const { theme, setTheme } = useTheme();
-  const themeMode = nextThemeToThemeMode(theme);
-
+  const themeMode = mounted ? nextThemeToThemeMode(theme) : ThemeMode.System;
   const darkModeSwitchRef = useRef<DarkModeSwitchHandle>(null);
 
   useEffect(() => {
@@ -86,10 +85,6 @@ export const DarkModeSwitchContainer = () => {
   const tooltipElement = getTooltip(themeMode);
   const tooltipHtml = useMemo(() => renderToStaticMarkup(tooltipElement), [tooltipElement]);
 
-  if (!mounted) {
-    return null;
-  }
-
   return (
     <IconWrapperBubble onClick={triggerClick} data-tooltip-id="base-tooltip" data-tooltip-html={tooltipHtml}>
       <DarkModeSwitchWrapper>