Mae's website :3
maemoon.me
personal
website
svelte
sveltekit
Add theme switching
+85
-15
+1
src/app.html
+1
src/app.html
···
7
7
<meta name="viewport" content="width=device-width, initial-scale=1" />
8
8
<link rel="preconnect" href="https://fonts.googleapis.com">
9
9
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+
<script src="https://kit.fontawesome.com/e62e48e8f3.js" crossorigin="anonymous"></script>
10
11
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
11
12
%sveltekit.head%
12
13
</head>
+14
-1
src/lib/global.css
+14
-1
src/lib/global.css
···
1
-
:root {
1
+
.theme-light {
2
2
--color-bg: #eceff4;
3
3
--color-fg-1: #2e3440;
4
4
--color-fg-2: #3b4252;
5
5
--color-fg-3: #434c5e;
6
6
--color-fg-4: #4c566a;
7
+
}
8
+
9
+
.theme-dark {
10
+
--color-bg: #3b4252;
11
+
--color-fg-1: #eceff4;
12
+
--color-fg-2: #e5e9f0;
13
+
--color-fg-3: #d8dee9;
7
14
}
8
15
9
16
* {
···
50
57
li {
51
58
list-style: none;
52
59
padding-bottom: 0.2em;
60
+
}
61
+
62
+
.icon {
63
+
width: 1em;
64
+
height: 1em;
65
+
vertical-align: -0.125em;
53
66
}
+55
-12
src/routes/+layout.svelte
+55
-12
src/routes/+layout.svelte
···
2
2
import Breadcrumb from '../lib/breadcrumb.svelte';
3
3
import '$lib/global.css';
4
4
import { blur } from 'svelte/transition';
5
-
5
+
import { theme } from './shared.svelte.js';
6
6
import { dev } from '$app/environment';
7
7
import { inject } from '@vercel/analytics';
8
8
import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
9
+
import { onMount } from 'svelte';
9
10
let { data, children } = $props();
10
-
11
+
11
12
inject({ mode: dev ? 'development' : 'production' });
12
13
injectSpeedInsights();
14
+
onMount(() => {
15
+
document.body.className = theme.dark ? 'theme-dark' : 'theme-light';
16
+
});
13
17
</script>
14
18
15
19
<svelte:head>
16
-
<meta name="description" content="Mae Moon's personal website and blog">
20
+
<meta name="description" content="Mae Moon's personal website and blog" />
17
21
</svelte:head>
18
22
19
23
<div id="page">
20
24
{#key data.currentRoute}
21
-
<aside>
22
-
<a href="/" class:active={data.currentRoute == "/"}>home</a>
23
-
<a href="/blog" class:active={data.currentRoute == "/blog"}>blog</a>
24
-
</aside>
25
-
<main>
26
-
{@render children?.()}
27
-
</main>
25
+
<aside>
26
+
<a href="/" class:active={data.currentRoute == '/'}>home</a>
27
+
<a href="/blog" class:active={data.currentRoute.includes('/blog')}>blog</a>
28
+
</aside>
29
+
<main>
30
+
{@render children?.()}
31
+
</main>
32
+
<button
33
+
aria-label="Switch theme"
34
+
id="themebutton"
35
+
onclick={() => {
36
+
theme.dark = !theme.dark;
37
+
document.body.className = theme.dark ? 'theme-dark' : 'theme-light';
38
+
}}
39
+
>
40
+
{#if theme.dark}
41
+
<i class="fa-solid fa-moon"></i>
42
+
{:else}
43
+
<i class="fa-solid fa-sun"></i>
44
+
{/if}
45
+
</button>
28
46
{/key}
29
47
</div>
30
48
···
33
51
display: flex;
34
52
flex-shrink: 1;
35
53
}
54
+
36
55
aside {
37
56
display: flex;
38
57
flex-direction: column;
···
41
60
padding: 2em;
42
61
flex-basis: 15%;
43
62
}
63
+
44
64
main {
45
65
padding: 2em;
46
66
flex-basis: 50%;
47
67
}
48
68
49
69
.active::before {
50
-
content: "* ";
70
+
content: '* ';
71
+
}
72
+
73
+
#themebutton {
74
+
position: fixed;
75
+
right: 1em;
76
+
bottom: 1em;
77
+
border: none;
78
+
font-size: 2em;
79
+
cursor: pointer;
80
+
color: var(--color-fg-1);
81
+
background-color: transparent;
82
+
display: flex;
83
+
justify-content: center;
84
+
align-items: center;
85
+
width: 1.5em;
86
+
height: 1.5em;
87
+
padding: 0;
88
+
transition: 0.1s ease-in-out;
51
89
}
52
-
</style>
90
+
91
+
#themebutton:hover {
92
+
color: var(--color-fg-2);
93
+
transform: translate(0, -3px);
94
+
}
95
+
</style>
+2
-1
src/routes/+page.svelte
+2
-1
src/routes/+page.svelte
···
1
1
<script>
2
2
import Supportbutton from '../lib/supportbutton.svelte';
3
3
import { fade } from 'svelte/transition';
4
+
import { theme } from './shared.svelte.js';
4
5
let { data } = $props();
5
6
</script>
6
7
···
38
39
<a href="/blog"><strong>see more -></strong></a>
39
40
</ul>
40
41
<h2 class="section">Support Me</h2>
41
-
<Supportbutton></Supportbutton>
42
+
<Supportbutton darkMode={theme.dark}></Supportbutton>
static/kofi-dark.webp
static/kofi-dark.webp
This is a binary file and will not be displayed.