wip: gateway

cloud/web/src/components/context-theme.tsx

@@ -0,0 +1,39 @@
+import { createStore } from "solid-js/store"
+import { makePersisted } from "@solid-primitives/storage"
+import { createEffect } from "solid-js"
+import { createInitializedContext } from "../util/context"
+import { isServer } from "solid-js/web"
+
+interface Storage {
+  mode: "light" | "dark"
+}
+
+export const { provider: ThemeProvider, use: useTheme } =
+  createInitializedContext("ThemeContext", () => {
+    const [store, setStore] = makePersisted(
+      createStore<Storage>({
+        mode:
+          !isServer &&
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light",
+      }),
+      {
+        name: "theme",
+      },
+    )
+    createEffect(() => {
+      document.documentElement.setAttribute("data-color-mode", store.mode)
+    })
+
+    return {
+      setMode(mode: Storage["mode"]) {
+        setStore("mode", mode)
+      },
+      get mode() {
+        return store.mode
+      },
+      ready: true,
+    }
+  })