feat(#750): add themestore and usetheme

next/src/hooks/useTheme.ts

@@ -0,0 +1,41 @@
+import { type Theme, THEMES } from "../types";
+import { useEffect } from "react";
+const PREFERRED_THEME = "dark"; // preferred theme must be dark for Tailwind
+
+function isPreferredTheme(theme, matchObj?) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const preferredThemeMatches = (
+    matchObj || window?.matchMedia(`(prefers-color-scheme: ${PREFERRED_THEME})`)
+  ).matches;
+
+  return theme === PREFERRED_THEME || (theme === "system" && preferredThemeMatches);
+}
+
+export function handleTheme(theme, matchObj?) {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const classList = document.documentElement.classList;
+
+  if (isPreferredTheme(theme, matchObj)) {
+    classList.add(PREFERRED_THEME);
+  } else {
+    classList.remove(PREFERRED_THEME);
+  }
+}
+
+export function useTheme(theme: Theme) {
+  theme = THEMES.includes(theme) ? theme : "system";
+
+  useEffect(() => {
+    const preferredTheme = window.matchMedia(`(prefers-color-scheme: ${PREFERRED_THEME})`);
+
+    preferredTheme.addEventListener("change", (event) => {
+      handleTheme(theme, event);
+    });
+  }, []);
+}

next/src/stores/index.ts

@@ -1,3 +1,4 @@
 export * from "./messageStore";
 export * from "./agentStore";
 export * from "./modelSettingsStore";
+export * from "./themeStore";

next/src/stores/themeStore.ts

@@ -0,0 +1,57 @@
+import type { StateCreator } from "zustand";
+import { createSelectors } from "./helpers";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import type { Theme } from "../types";
+import { handleTheme } from "../hooks/useTheme";
+
+const resetters: (() => void)[] = [];
+
+interface ThemeSlice {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const initialThemeState = {
+  theme: "system" as const,
+};
+
+const createThemeSlice: StateCreator<ThemeSlice> = (set) => {
+  resetters.push(() => set(initialThemeState));
+
+  return {
+    ...initialThemeState,
+    setTheme: (theme: Theme) => {
+      set(() => ({
+        theme,
+      }));
+
+      handleTheme(theme);
+    },
+  };
+};
+
+export const useThemeStore = createSelectors(
+  create<ThemeSlice>()(
+    persist(
+      (...a) => ({
+        ...createThemeSlice(...a),
+      }),
+      {
+        name: "theme",
+        storage: createJSONStorage(() => localStorage),
+        onRehydrateStorage: () => {
+          return (state, error) => {
+            if (error) {
+              console.error("an error happened during hydration. ", error);
+            } else {
+              handleTheme(state ? state.theme : "system");
+            }
+          };
+        },
+      }
+    )
+  )
+);
+
+export const resetAllThemeSlices = () => resetters.forEach((resetter) => resetter());

next/src/types/index.ts

@@ -1,2 +1,3 @@
 export * from "./propTypes";
 export * from "./modelSettings";
+export * from "./userSettings";

next/src/types/userSettings.ts

@@ -0,0 +1,2 @@
+export const THEMES = ["dark" as const, "light" as const, "system" as const];
+export type Theme = "dark" | "light" | "system";