finxol.io
A very simple bookmarking webapp
bookmarker.finxol.deno.net/
fix: set theme on initial load
+25
-18
+1
-18
src/components/ThemeSwitcher.tsx
+1
-18
src/components/ThemeSwitcher.tsx
···
1
1
import { createEffect, createSignal, onCleanup, onMount } from "solid-js"
2
2
import { MoonIcon, SunIcon } from "lucide-solid"
3
-
4
-
type Theme = "light" | "dark"
5
-
6
-
const STORAGE_KEY = "theme"
7
-
8
-
function getSystemTheme(): Theme {
9
-
return window.matchMedia("(prefers-color-scheme: dark)").matches
10
-
? "dark"
11
-
: "light"
12
-
}
13
-
14
-
function getInitialTheme(): Theme {
15
-
const stored = localStorage.getItem(STORAGE_KEY)
16
-
if (stored === "light" || stored === "dark") {
17
-
return stored
18
-
}
19
-
return getSystemTheme()
20
-
}
3
+
import { getInitialTheme, STORAGE_KEY, Theme } from "../utils/theme.ts"
21
4
22
5
export function ThemeSwitcher() {
23
6
const [theme, setTheme] = createSignal<Theme>(getInitialTheme())
+3
src/routes/__root.tsx
+3
src/routes/__root.tsx
···
5
5
import "./main.css"
6
6
import "./root.css"
7
7
import { useMe } from "../utils/auth.ts"
8
+
import { useTheme } from "../utils/theme.ts"
8
9
9
10
export const Route = createRootRoute({
10
11
component: RootComponent,
···
12
13
13
14
function RootComponent() {
14
15
const query = useMe()
16
+
17
+
useTheme()
15
18
16
19
return (
17
20
<main>
+21
src/utils/theme.ts
+21
src/utils/theme.ts
···
1
+
export type Theme = "light" | "dark"
2
+
3
+
export const STORAGE_KEY = "theme"
4
+
5
+
function getSystemTheme(): Theme {
6
+
return window.matchMedia("(prefers-color-scheme: dark)").matches
7
+
? "dark"
8
+
: "light"
9
+
}
10
+
11
+
export function getInitialTheme(): Theme {
12
+
const stored = localStorage.getItem(STORAGE_KEY)
13
+
if (stored === "light" || stored === "dark") {
14
+
return stored
15
+
}
16
+
return getSystemTheme()
17
+
}
18
+
19
+
export function useTheme() {
20
+
document.documentElement.dataset.theme = getInitialTheme()
21
+
}