Skip to content

Commit 221bbf4

Browse files
refact0rrefact0r
committed
theme toggle
1 parent 552c78f commit 221bbf4

File tree

7 files changed

+100
-20
lines changed

7 files changed

+100
-20
lines changed

‎src/app.scss

-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
:root {
2-
--bg-0: oklch(93% 0.05 180);
3-
--bg-1: oklch(90% 0.05 180);
4-
--bg-2: oklch(30% 0.05 180 / 0.1);
5-
--bg-3: oklch(30% 0.05 180 / 0.2);
6-
--bg-4: oklch(30% 0.05 180 / 0.3);
7-
--txt: oklch(30% 0.05 180);
8-
}
9-
101
* {
112
box-sizing: border-box;
123
}

‎src/lib/stores/preferences.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { persisted } from 'svelte-persisted-store';
22

33
export const defaultPreferences = {
4+
darkMode: false,
45
ambienceVolume: 0.8,
56
speechVolume: 0.8
67
};

‎src/routes/+layout.svelte

+8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
<script>
22
import '../app.scss';
3+
import { preferences } from '$lib/stores/preferences.js';
34
import { fade } from 'svelte/transition';
45
56
export let data;
7+
8+
$: theme = $preferences.darkMode ? 'dark' : 'light';
69
</script>
710

11+
<svelte:head>
12+
<meta name="color-scheme" content={theme} />
13+
<link rel="stylesheet" href={`/theme/${theme}.css`} />
14+
</svelte:head>
15+
816
<div class="app">
917
{#key data.pathname}
1018
<div class="main" in:fade={{ duration: 200, delay: 200 }} out:fade={{ duration: 200 }}>

‎src/routes/about/+page.svelte

+1
Original file line numberDiff line numberDiff line change
@@ -69,5 +69,6 @@
6969
padding: 1rem 1.5rem;
7070
border-radius: 2rem;
7171
background-color: var(--bg-2);
72+
backdrop-filter: blur(6px);
7273
}
7374
</style>

‎src/routes/settings/+page.svelte

+74-11
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
class="icon-button"
2121
title="reset to default"
2222
on:click|preventDefault={() => {
23+
$preferences.darkMode = defaultPreferences.darkMode;
2324
$preferences.ambienceVolume = defaultPreferences.ambienceVolume;
2425
$preferences.speechVolume = defaultPreferences.speechVolume;
2526
}}
@@ -28,6 +29,11 @@
2829
</button>
2930
</div>
3031
<div class="box">
32+
<!-- dark mode toggle -->
33+
<div class="row">
34+
<label for="darkMode">dark mode</label>
35+
<input type="checkbox" title="toggle dark mode" bind:checked={$preferences.darkMode} />
36+
</div>
3137
<div class="row">
3238
<label for="ambienceVolume">ambience volume</label>
3339
<input
@@ -40,7 +46,6 @@
4046
bind:value={$preferences.ambienceVolume}
4147
/>
4248
</div>
43-
4449
<div class="row">
4550
<label for="speechVolume">speech volume</label>
4651
<input
@@ -82,57 +87,115 @@
8287
display: flex;
8388
flex-direction: column;
8489
gap: 1.5rem;
90+
backdrop-filter: blur(6px);
8591
}
8692
8793
.row {
8894
display: flex;
8995
align-items: center;
90-
gap: 1rem;
96+
gap: 2rem;
97+
justify-content: space-between;
9198
}
9299
93100
label {
94-
width: 20rem;
101+
max-width: 10rem;
95102
}
96103
97104
.slider {
98-
width: 100%;
105+
width: 15rem;
99106
background: none;
100107
}
101108
109+
/* customize dark mode toggle */
110+
input[type='checkbox'] {
111+
-webkit-appearance: none;
112+
-moz-appearance: none;
113+
appearance: none;
114+
width: 28px;
115+
height: 14px;
116+
border-radius: 1rem;
117+
background-color: var(--bg-3);
118+
position: relative;
119+
cursor: pointer;
120+
transition: background-color 0.3s;
121+
}
122+
input[type='checkbox']:before {
123+
box-sizing: border-box;
124+
content: '';
125+
position: absolute;
126+
width: 20px;
127+
height: 20px;
128+
border: 2px solid var(--txt);
129+
background-color: var(--bg-3);
130+
backdrop-filter: blur(3px);
131+
border-radius: 50%;
132+
top: -3px;
133+
left: -3px;
134+
transition: left 0.3s;
135+
}
136+
input[type='checkbox']:checked {
137+
background-color: var(--txt);
138+
}
139+
input[type='checkbox']:checked:before {
140+
left: 14px;
141+
}
142+
102143
input[type='range'],
103144
::-webkit-slider-thumb {
104145
-webkit-appearance: none;
105146
}
106147
::-moz-range-thumb {
107-
width: 1rem;
108-
height: 1rem;
148+
box-sizing: border-box;
149+
width: 20px;
150+
height: 20px;
109151
border: 2px solid var(--txt);
110152
background-color: var(--bg-3);
111153
backdrop-filter: blur(3px);
112154
border-radius: 50%;
155+
156+
&:hover {
157+
cursor: pointer;
158+
}
113159
}
114160
::-webkit-slider-thumb {
115-
width: 1rem;
116-
height: 1rem;
161+
box-sizing: border-box;
162+
width: 20px;
163+
height: 20px;
117164
border: 2px solid var(--txt);
118165
background-color: var(--bg-3);
119166
backdrop-filter: blur(3px);
120167
border-radius: 50%;
121168
margin-top: calc(-0.5rem + 1px);
169+
170+
&:hover {
171+
cursor: pointer;
172+
}
122173
}
123174
::-moz-range-progress {
124175
background-color: var(--txt);
125-
height: 2px;
176+
height: 4px;
126177
border-radius: 2px;
178+
179+
&:hover {
180+
cursor: pointer;
181+
}
127182
}
128183
::-webkit-slider-runnable-track {
129184
background-color: var(--bg-3);
130-
height: 2px;
185+
height: 4px;
131186
border-radius: 2px;
187+
188+
&:hover {
189+
cursor: pointer;
190+
}
132191
}
133192
::-moz-range-track {
134193
background-color: var(--bg-3);
135-
height: 2px;
194+
height: 4px;
136195
border-radius: 2px;
196+
197+
&:hover {
198+
cursor: pointer;
199+
}
137200
}
138201
</style>

‎static/theme/dark.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:root {
2+
--bg-0: oklch(22% 0.02 180);
3+
--bg-1: oklch(20% 0.02 180);
4+
--bg-2: oklch(80% 0.05 180 / 0.1);
5+
--bg-3: oklch(80% 0.05 180 / 0.2);
6+
--bg-4: oklch(80% 0.05 180 / 0.3);
7+
--txt: oklch(80% 0.05 180);
8+
}

‎static/theme/light.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:root {
2+
--bg-0: oklch(93% 0.05 180);
3+
--bg-1: oklch(90% 0.05 180);
4+
--bg-2: oklch(30% 0.05 180 / 0.1);
5+
--bg-3: oklch(30% 0.05 180 / 0.2);
6+
--bg-4: oklch(30% 0.05 180 / 0.3);
7+
--txt: oklch(30% 0.05 180);
8+
}

0 commit comments

Comments
 (0)