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