From f10b48772114211964981bb5362bb97d31390b79 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sun, 23 Jan 2022 14:20:13 +0800
Subject: [PATCH] fix(website): upadte colors correctly when palette is only
 customized in one color mode

---
 website/src/theme/Toggle.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/website/src/theme/Toggle.tsx b/website/src/theme/Toggle.tsx
index 9084521e7701..b759179f2951 100644
--- a/website/src/theme/Toggle.tsx
+++ b/website/src/theme/Toggle.tsx
@@ -13,6 +13,11 @@ import {
   darkStorage,
   type ColorState,
   updateDOMColors,
+  LIGHT_PRIMARY_COLOR,
+  DARK_PRIMARY_COLOR,
+  LIGHT_BACKGROUND_COLOR,
+  DARK_BACKGROUND_COLOR,
+  COLOR_SHADES,
 } from '@site/src/utils/colorUtils';
 
 // The ColorGenerator modifies the DOM styles. The styles are persisted in
@@ -27,12 +32,14 @@ export default function Toggle(props: Props): JSX.Element {
         props.onChange(e);
         const isDarkMode = e.target.checked;
         const storage = isDarkMode ? darkStorage : lightStorage;
-        const colorState = JSON.parse(
-          storage.get() ?? 'null',
-        ) as ColorState | null;
-        if (colorState) {
-          updateDOMColors(colorState);
-        }
+        const colorState: ColorState = JSON.parse(storage.get() ?? 'null') ?? {
+          baseColor: isDarkMode ? DARK_PRIMARY_COLOR : LIGHT_PRIMARY_COLOR,
+          background: isDarkMode
+            ? DARK_BACKGROUND_COLOR
+            : LIGHT_BACKGROUND_COLOR,
+          shades: COLOR_SHADES,
+        };
+        updateDOMColors(colorState);
       }}
     />
   );