utils cleanup, initial static generation

src/utils/contexts/color.jsx

@@ -0,0 +1,44 @@
+import { createContext, useState, useEffect, useMemo } 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 function 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]);
+
+  const value = useMemo(() => ({ color, setColor }), [color]);
+
+  return <ColorContext.Provider value={value}>{children}</ColorContext.Provider>;
+}

src/utils/contexts/settings.jsx

@@ -0,0 +1,15 @@
+import { createContext, useState, useMemo } from "react";
+
+export const SettingsContext = createContext();
+
+export function SettingsProvider({ initialSettings, children }) {
+  const [settings, setSettings] = useState({});
+
+  if (initialSettings) {
+    setSettings(initialSettings);
+  }
+
+  const value = useMemo(() => ({ settings, setSettings }), [settings]);
+
+  return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
+}

src/utils/contexts/theme.jsx

@@ -0,0 +1,45 @@
+import { createContext, useState, useEffect, useMemo } from "react";
+
+const getInitialTheme = () => {
+  if (typeof window !== "undefined" && window.localStorage) {
+    const storedPrefs = window.localStorage.getItem("theme-mode");
+    if (typeof storedPrefs === "string") {
+      return storedPrefs;
+    }
+
+    const userMedia = window.matchMedia("(prefers-color-scheme: dark)");
+    if (userMedia.matches) {
+      return "dark";
+    }
+  }
+
+  return "dark"; // dark as the default mode
+};
+
+export const ThemeContext = createContext();
+
+export function ThemeProvider({ initialTheme, children }) {
+  const [theme, setTheme] = useState(getInitialTheme);
+
+  const rawSetTheme = (rawTheme) => {
+    const root = window.document.documentElement;
+    const isDark = rawTheme === "dark";
+
+    root.classList.remove(isDark ? "light" : "dark");
+    root.classList.add(rawTheme);
+
+    localStorage.setItem("theme-mode", rawTheme);
+  };
+
+  if (initialTheme) {
+    rawSetTheme(initialTheme);
+  }
+
+  useEffect(() => {
+    rawSetTheme(theme);
+  }, [theme]);
+
+  const value = useMemo(() => ({ theme, setTheme }), [theme]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}