fix theme toggle on system mode

mui · siriwatknp · Dec 9, 2022 · Nov 19, 2022 · Nov 21, 2022 · Nov 21, 2022
commit b95669f115096ef1a97c58b1ff49757ee71e01f3
diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx
@@ -11,24 +11,24 @@ function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {
   React.useEffect(() => {
     setMounted(true);
   }, []);
+  const calculatedMode = mode === 'system' ? systemMode : mode;
   return (
-    <Tooltip title={mode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
+    <Tooltip title={calculatedMode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
       <IconButton
         color="primary"
         disableTouchRipple
-        disabled={!mode}
+        disabled={!calculatedMode}
         onClick={() => {
-          props.onChange(mode === 'light' || systemMode === 'light');
-          setMode(mode === 'dark' ? 'light' : 'dark');
+          props.onChange(calculatedMode === 'light');
+          setMode(calculatedMode === 'dark' ? 'light' : 'dark');
         }}
       >
-        {!mode || !mounted
+        {!calculatedMode || !mounted
           ? null
           : {
               light: <DarkModeOutlined fontSize="small" />,
-              system: <DarkModeOutlined fontSize="small" />,
               dark: <LightModeOutlined fontSize="small" />,
-            }[mode]}
+            }[calculatedMode]}
       </IconButton>
     </Tooltip>
   );