lesbian.skin
My website
lesbian.skin
Add dark mode
+1
src/input.css
+1
src/input.css
+33
src/static/script.js
+33
src/static/script.js
···
1
+
function setDarkMode(dark, preference) {
2
+
if (dark) {
3
+
preference !== "dark"
4
+
? localStorage.setItem("theme", "dark")
5
+
: localStorage.removeItem("theme");
6
+
document.documentElement.classList.add("dark");
7
+
} else if (!dark) {
8
+
preference !== "light"
9
+
? localStorage.setItem("theme", "light")
10
+
: localStorage.removeItem("theme");
11
+
document.documentElement.classList.remove("dark");
12
+
}
13
+
}
14
+
15
+
const preference = window.matchMedia("(prefers-color-scheme: dark)").matches
16
+
? "dark"
17
+
: "light";
18
+
if (
19
+
localStorage.getItem("theme") === "dark" ||
20
+
(!("theme" in localStorage) && preference === "dark")
21
+
) {
22
+
setDarkMode(true, preference);
23
+
}
24
+
window.onload = function () {
25
+
document
26
+
.getElementById("button-dark-mode")
27
+
.addEventListener("click", function () {
28
+
setDarkMode(
29
+
!document.documentElement.classList.contains("dark"),
30
+
preference,
31
+
);
32
+
});
33
+
};
+16
-1
src/website/common.gleam
+16
-1
src/website/common.gleam
···
40
40
html.html([attr.attribute("lang", "en")], [
41
41
html.head([], [
42
42
html.meta([attr.attribute("charset", "UTF-8")]),
43
+
html.script([attr.src("/script.js")], ""),
43
44
html.link([attr.rel("stylesheet"), attr.href("/style.css")]),
44
45
html.link([
45
46
attr.rel("preconnect"),
···
62
63
html.body(
63
64
[
64
65
attr.class(
65
-
"my-0 sm:my-5 mx-0 sm:mx-6 md:mx-10 lg:mx-20 xl:mx-48 2xl:mx-64",
66
+
"my-0 sm:my-5 mx-0 sm:mx-6 md:mx-10 lg:mx-20 xl:mx-48 2xl:mx-64 dark:bg-neutral-700",
66
67
),
67
68
],
68
69
[navbar(), ..elements],
···
97
98
navitem(name: "Home", href: ""),
98
99
navitem(name: "Projects", href: "projects"),
99
100
navitem(name: "Posts", href: "posts"),
101
+
darkmode(),
100
102
],
103
+
)
104
+
}
105
+
106
+
fn darkmode() -> element.Element(e) {
107
+
html.button(
108
+
[
109
+
attr.id("button-dark-mode"),
110
+
attr.class(
111
+
"drop-shadow-md no-underline bg-gray-300 dark:bg-neutral-900 p-3 rounded-xl text-black dark:text-neutral-200
112
+
before:content-['☀️'] dark:before:content-['🌕️']",
113
+
),
114
+
],
115
+
[],
101
116
)
102
117
}
103
118