docs: Fix dark mode logos in API reference (#1504)

www/reference/src/components/ColorModeToggler/index.js

@@ -9,18 +9,39 @@ 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 }) => (
+        {({ theme, toggleTheme }) => {
-          <button onClick={() => {
+          const currentTheme = checkLocalStorage(theme, toggleTheme);
-            const mode = theme === 'dark' ? 'light' : 'dark';
+          return (
-            toggleTheme(mode);
+            <button onClick={() => {
-            setColorMode(mode);
+              const mode = currentTheme === 'dark' ? 'light' : 'dark';
-          }} className="dark-mode-toggler">
+              toggleTheme(mode);
-            {theme === "light" && <LightMode />}
+              setColorMode(mode);
-            {theme === "dark" && <DarkMode />}
+            }} className="dark-mode-toggler">
-          </button>
+              {currentTheme === "light" && <LightMode />}
-        )}
+              {currentTheme === "dark" && <DarkMode />}
+            </button>
+          );
+        }}
     </ThemeToggler>
   )
 }