add theme switcher

src/utils/color-context.js

@@ -0,0 +1,42 @@
+import { createContext, useState, useEffect } from "react";
+
+let lastColor = false;
+
+const getInitialColor = () => {
+  if (typeof window !== "undefined" && window.localStorage) {
+    const storedPrefs = window.localStorage.getItem("theme-color");
+    if (typeof storedPrefs === "string") {
+      lastColor = storedPrefs;
+      return storedPrefs;
+    }
+  }
+
+  return "slate"; // slate as the default color;
+};
+
+export const ColorContext = createContext();
+
+export const ColorProvider = ({ initialTheme, children }) => {
+  const [color, setColor] = useState(getInitialColor);
+
+  const rawSetColor = (rawColor) => {
+    const root = window.document.documentElement;
+
+    root.classList.remove(`theme-${lastColor}`);
+    root.classList.add(`theme-${rawColor}`);
+
+    localStorage.setItem("theme-color", rawColor);
+
+    lastColor = rawColor;
+  };
+
+  if (initialTheme) {
+    rawSetColor(initialTheme);
+  }
+
+  useEffect(() => {
+    rawSetColor(color);
+  }, [color]);
+
+  return <ColorContext.Provider value={{ color, setColor }}>{children}</ColorContext.Provider>;
+};

src/utils/theme-context.js

@@ -2,7 +2,7 @@ import { createContext, useState, useEffect } from "react";
 
 const getInitialTheme = () => {
   if (typeof window !== "undefined" && window.localStorage) {
-    const storedPrefs = window.localStorage.getItem("color-theme");
+    const storedPrefs = window.localStorage.getItem("theme-mode");
     if (typeof storedPrefs === "string") {
       return storedPrefs;
     }
@@ -13,7 +13,7 @@ const getInitialTheme = () => {
     }
   }
 
-  return "light"; // light theme as the default;
+  return "dark"; // dark as the default mode
 };
 
 export const ThemeContext = createContext();
@@ -28,7 +28,7 @@ export const ThemeProvider = ({ initialTheme, children }) => {
     root.classList.remove(isDark ? "light" : "dark");
     root.classList.add(rawTheme);
 
-    localStorage.setItem("color-theme", rawTheme);
+    localStorage.setItem("theme-mode", rawTheme);
   };
 
   if (initialTheme) {
@@ -39,9 +39,5 @@ export const ThemeProvider = ({ initialTheme, children }) => {
     rawSetTheme(theme);
   }, [theme]);
 
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
+  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
 };