From 5e0e5b90fc30876b3fea6045d896f7e8ab41a73b Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Sun, 22 May 2022 17:51:13 +0300
Subject: [PATCH] docs: Fix dark mode logos in API reference (#1504)

---
 .../src/components/ColorModeToggler/index.js  | 41 ++++++++++++++-----
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/www/reference/src/components/ColorModeToggler/index.js b/www/reference/src/components/ColorModeToggler/index.js
index 7b990bc539..67aa6fd83e 100644
--- a/www/reference/src/components/ColorModeToggler/index.js
+++ b/www/reference/src/components/ColorModeToggler/index.js
@@ -8,19 +8,40 @@ import { useColorMode } from 'theme-ui'
 
 export default function ColorModeToggler () {
   const [, setColorMode] = useColorMode()
+
+  function checkLocalStorage (currentTheme, toggleTheme) {
+    //check that theme local storage values are set correctly
+    let themeUiColorMode = window.localStorage.getItem('theme-ui-color-mode');
+    let theme = window.localStorage.getItem('theme')
+    if (!themeUiColorMode) {
+      themeUiColorMode = theme || currentTheme
+      window.localStorage.setItem('theme-ui-color-mode', themeUiColorMode);
+      setColorMode(themeUiColorMode);
+    }
+    if (!theme) {
+      theme = themeUiColorMode || currentTheme
+      window.localStorage.setItem('theme', theme);
+      toggleTheme(theme)
+    }
+
+    return theme || themeUiColorMode || currentTheme;
+  }
   
   return (
     <ThemeToggler>
-        {({ theme, toggleTheme }) => (
-          <button onClick={() => {
-            const mode = theme === 'dark' ? 'light' : 'dark';
-            toggleTheme(mode);
-            setColorMode(mode);
-          }} className="dark-mode-toggler">
-            {theme === "light" && <LightMode />}
-            {theme === "dark" && <DarkMode />}
-          </button>
-        )}
+        {({ theme, toggleTheme }) => {
+          const currentTheme = checkLocalStorage(theme, toggleTheme);
+          return (
+            <button onClick={() => {
+              const mode = currentTheme === 'dark' ? 'light' : 'dark';
+              toggleTheme(mode);
+              setColorMode(mode);
+            }} className="dark-mode-toggler">
+              {currentTheme === "light" && <LightMode />}
+              {currentTheme === "dark" && <DarkMode />}
+            </button>
+          );
+        }}
     </ThemeToggler>
   )
 }
\ No newline at end of file