desertthunder.dev
web based infinite canvas
1import { browser } from "$app/environment";
2
3export type Theme = "light" | "dark";
4
5export function createThemeStore() {
6 let theme = $state<Theme>("dark");
7
8 if (browser) {
9 const stored = localStorage.getItem("theme") as Theme | null;
10 if (stored === "light" || stored === "dark") {
11 theme = stored;
12 } else {
13 theme = "dark";
14 localStorage.setItem("theme", "dark");
15 }
16 document.documentElement.setAttribute("data-theme", theme);
17 }
18
19 function toggle() {
20 theme = theme === "dark" ? "light" : "dark";
21 if (browser) {
22 localStorage.setItem("theme", theme);
23 document.documentElement.setAttribute("data-theme", theme);
24 }
25 }
26
27 function set(newTheme: Theme) {
28 theme = newTheme;
29 if (browser) {
30 localStorage.setItem("theme", theme);
31 document.documentElement.setAttribute("data-theme", theme);
32 }
33 }
34
35 return {
36 get current() {
37 return theme;
38 },
39 toggle,
40 set,
41 };
42}
43
44export const themeStore = createThemeStore();