My website
lesbian.skin
Remove dark mode handling from the model
+92
-78
+8
-5
src/ffi.mjs
+8
-5
src/ffi.mjs
···
2
2
return window.location.pathname
3
3
}
4
4
5
-
// TODO: Add localStorage as well
6
-
export function prefers_dark_mode() {
7
-
const matches = window.matchMedia('(prefers-color-scheme:dark)').matches
8
-
if (matches) {
5
+
export function init_theme() {
6
+
if (window.matchMedia('(prefers-color-scheme:dark)').matches) {
9
7
document.documentElement.classList.add("dark")
8
+
} else {
9
+
document.documentElement.classList.remove("dark")
10
10
}
11
-
return matches
11
+
}
12
+
13
+
export function is_dark_mode() {
14
+
return document.documentElement.classList.contains("dark")
12
15
}
13
16
14
17
export function switch_theme() {
+84
-73
src/website.gleam
+84
-73
src/website.gleam
···
30
30
current_route: Route,
31
31
posts: List(posts.Post(Msg)),
32
32
projects: List(projects.Project(Msg)),
33
-
dark_mode: Bool,
34
33
)
35
34
}
36
35
···
45
44
@external(javascript, "./ffi.mjs", "get_route")
46
45
fn do_get_route() -> String
47
46
48
-
@external(javascript, "./ffi.mjs", "prefers_dark_mode")
49
-
fn prefers_dark_mode() -> Bool
47
+
@external(javascript, "./ffi.mjs", "init_theme")
48
+
fn init_theme() -> Bool
49
+
50
+
@external(javascript, "./ffi.mjs", "is_dark_mode")
51
+
fn is_dark_mode() -> Bool
50
52
51
53
@external(javascript, "./ffi.mjs", "switch_theme")
52
54
fn do_switch_theme() -> Nil
···
75
77
current_route: get_route(),
76
78
projects: projects.all(),
77
79
posts: posts.all(),
78
-
dark_mode: prefers_dark_mode(),
79
80
),
80
-
modem.init(on_route_change),
81
+
{
82
+
init_theme()
83
+
modem.init(on_route_change)
84
+
},
81
85
)
82
86
}
83
87
···
105
109
Model(..model, current_route: route),
106
110
effect.none(),
107
111
)
108
-
ChangeDarkMode -> #(
109
-
Model(..model, dark_mode: !model.dark_mode),
110
-
switch_theme(),
111
-
)
112
+
ChangeDarkMode -> #(model, switch_theme())
112
113
DoneChangeDarkMode -> #(model, effect.none())
113
114
}
114
115
}
···
182
183
],
183
184
[
184
185
html.h1([attr.class("m-0")], [
185
-
case model.dark_mode {
186
+
case is_dark_mode() {
186
187
True -> element.text("🌕")
187
188
False -> element.text("☀️")
188
189
},
···
193
194
}
194
195
195
196
fn view_home(_model: Model) -> Element(Msg) {
196
-
html.div(
197
-
[
198
-
attr.class(
199
-
"drop-shadow-md text-xl p-4 mb-4 rounded-xl bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200",
200
-
),
201
-
],
202
-
[
203
-
html.p([attr.class("mb-4")], [
204
-
element.text(
205
-
"Hi! I'm Naomi (or Mia), a trans girl from the UK who loves to code! I mostly make Minecraft mods, but have started
197
+
html.div([], [
198
+
html.div(
199
+
[
200
+
attr.class(
201
+
"drop-shadow-md text-xl p-4 mb-4 rounded-xl bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200",
202
+
),
203
+
],
204
+
[
205
+
html.p([attr.class("mb-4")], [
206
+
element.text(
207
+
"Hi! I'm Naomi (or Mia), a trans girl from the UK who loves to code! I mostly make Minecraft mods, but have started
206
208
to begin other projects like ",
207
-
),
208
-
common.link("Sheetr", "https://sheetr.app/"),
209
-
element.text(" and "),
210
-
common.link("Lilypad", "https://codeberg.org/naomi/lilypad"),
211
-
element.text(
212
-
". Both projects are in their infancy, but I hope that they can both become useful to someone
209
+
),
210
+
common.link("Sheetr", "https://sheetr.app/"),
211
+
element.text(" and "),
212
+
common.link("Lilypad", "https://codeberg.org/naomi/lilypad"),
213
+
element.text(
214
+
". Both projects are in their infancy, but I hope that they can both become useful to someone
213
215
out there!",
214
-
),
215
-
]),
216
-
html.p([], [
217
-
element.text(
218
-
"I absolutely love learning new languages, so here is what I know:",
219
-
),
220
-
cluster.of(
221
-
html.div,
222
-
[attr.class("gap-4 sm:gap-20 flex flex-col sm:flex-row")],
223
-
[
224
-
ui.stack([], [
225
-
html.h3([attr.class("text-2xl underline")], [
226
-
element.text("Proficient"),
216
+
),
217
+
]),
218
+
html.p([], [
219
+
element.text(
220
+
"I absolutely love learning new languages, so here is what I know:",
221
+
),
222
+
cluster.of(
223
+
html.div,
224
+
[attr.class("gap-4 sm:gap-20 flex flex-col sm:flex-row")],
225
+
[
226
+
ui.stack([], [
227
+
html.h3([attr.class("text-2xl underline")], [
228
+
element.text("Proficient"),
229
+
]),
230
+
html.ul([attr.class("list-disc pl-8")], [
231
+
html.li([], [element.text("⭐ Gleam")]),
232
+
html.li([], [element.text("☕ Java")]),
233
+
html.li([], [element.text("📜 JavaScript")]),
234
+
html.li([], [element.text("🐍 Python")]),
235
+
html.li([], [element.text("❓mcfunction")]),
236
+
]),
227
237
]),
228
-
html.ul([attr.class("list-disc pl-8")], [
229
-
html.li([], [element.text("⭐ Gleam")]),
230
-
html.li([], [element.text("☕ Java")]),
231
-
html.li([], [element.text("📜 JavaScript")]),
232
-
html.li([], [element.text("🐍 Python")]),
233
-
html.li([], [element.text("❓mcfunction")]),
234
-
]),
235
-
]),
236
-
ui.stack([], [
237
-
html.h3([attr.class("text-2xl underline")], [
238
-
element.text("Learning"),
239
-
]),
240
-
html.ul([attr.class("list-disc pl-8")], [
241
-
html.li([], [element.text("🦀 Rust")]),
242
-
html.li([], [element.text("🟦 Go")]),
243
-
html.li([], [element.text("🎮 C#")]),
244
-
html.li([], [element.text("💀 C++")]),
245
-
]),
246
-
]),
247
-
ui.stack([], [
248
-
html.h3([attr.class("text-2xl underline")], [
249
-
element.text("Want to learn"),
238
+
ui.stack([], [
239
+
html.h3([attr.class("text-2xl underline")], [
240
+
element.text("Learning"),
241
+
]),
242
+
html.ul([attr.class("list-disc pl-8")], [
243
+
html.li([], [element.text("🦀 Rust")]),
244
+
html.li([], [element.text("🟦 Go")]),
245
+
html.li([], [element.text("🎮 C#")]),
246
+
html.li([], [element.text("💀 C++")]),
247
+
]),
250
248
]),
251
-
html.ul([attr.class("list-disc pl-8")], [
252
-
html.li([], [element.text("⚡ Zig")]),
253
-
html.li([], [element.text("♻️ Kotlin")]),
249
+
ui.stack([], [
250
+
html.h3([attr.class("text-2xl underline")], [
251
+
element.text("Want to learn"),
252
+
]),
253
+
html.ul([attr.class("list-disc pl-8")], [
254
+
html.li([], [element.text("⚡ Zig")]),
255
+
html.li([], [element.text("♻️ Kotlin")]),
256
+
]),
254
257
]),
255
-
]),
256
-
],
258
+
],
259
+
),
260
+
]),
261
+
// html.p([], [
262
+
// element.text("As of this coming September, I will be studying a BSc in Computer Games Programming @ "),
263
+
// common.link("Staffs", "https://staffs.ac.uk/")
264
+
// ])
265
+
],
266
+
),
267
+
html.div(
268
+
[
269
+
attr.class(
270
+
"drop-shadow-md text-xl p-4 mb-4 rounded-xl bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200",
257
271
),
258
-
]),
259
-
// html.p([], [
260
-
// element.text("As of this coming September, I will be studying a BSc in Computer Games Programming @ "),
261
-
// common.link("Staffs", "https://staffs.ac.uk/")
262
-
// ])
263
-
],
264
-
)
272
+
],
273
+
[html.h1([attr.class("text-3xl m-0 text-pink-400")],[element.text("Repositories")])],
274
+
),
275
+
])
265
276
}
266
277
267
278
fn view_projects(model: Model) -> Element(Msg) {