A focused Docker Compose management web application.
feat: theme selector
+48
-11
+10
packages/panel/src/lib/component/Tabs.svelte
+10
packages/panel/src/lib/component/Tabs.svelte
···
90
90
</div>
91
91
92
92
<style lang="scss">
93
+
// Modify h2 of all child components
94
+
* :global(h2) {
95
+
margin-bottom: 5px;
96
+
font-size: 16px;
97
+
98
+
&:not(:first-child) {
99
+
margin-top: 15px;
100
+
}
101
+
}
102
+
93
103
.container {
94
104
background-color: var(--surface0);
95
105
border-radius: 10px;
+4
packages/panel/src/lib/style.scss
+4
packages/panel/src/lib/style.scss
-10
packages/panel/src/routes/(authenticated)/projects/EditTabs.svelte
-10
packages/panel/src/routes/(authenticated)/projects/EditTabs.svelte
···
28
28
{/snippet}
29
29
30
30
<style lang="scss">
31
-
// Modify h2 of all child components
32
-
* :global(h2) {
33
-
margin-bottom: 5px;
34
-
font-size: 16px;
35
-
36
-
&:not(:first-child) {
37
-
margin-top: 15px;
38
-
}
39
-
}
40
-
41
31
.error {
42
32
color: var(--red);
43
33
position: absolute;
+29
-1
packages/panel/src/routes/(authenticated)/settings/+page.svelte
+29
-1
packages/panel/src/routes/(authenticated)/settings/+page.svelte
···
5
5
import Fa from "svelte-fa";
6
6
import { api } from "$lib";
7
7
8
+
const THEME_KEY = "luminary-theme";
9
+
8
10
let { data } = $props();
11
+
12
+
let theme = $state(localStorage.getItem(THEME_KEY) ?? "macchiato");
13
+
$effect(() => {
14
+
localStorage.setItem(THEME_KEY, theme);
15
+
document.documentElement.setAttribute("class", theme);
16
+
});
9
17
</script>
10
18
11
19
<div class="flexc gap-10">
···
27
35
</div>
28
36
29
37
{#snippet appearance()}
30
-
<div class="flexc gap-10">COMING SOON</div>
38
+
<div class="flexc gap-10">
39
+
<div class="fit">
40
+
<h2>Theme</h2>
41
+
<div>
42
+
<input type="radio" id="theme-macchiato" name="theme" value="macchiato" bind:group={theme} />
43
+
<label for="theme-macchiato">🌺 Macchiato</label>
44
+
</div>
45
+
<div>
46
+
<input type="radio" id="theme-frappe" name="theme" value="frappe" bind:group={theme} />
47
+
<label for="theme-frappe">🪴 Frappé</label>
48
+
</div>
49
+
<div>
50
+
<input type="radio" id="theme-mocha" name="theme" value="mocha" bind:group={theme} />
51
+
<label for="theme-mocha">🌿 Mocha</label>
52
+
</div>
53
+
<div>
54
+
<input type="radio" id="theme-latte" name="theme" value="latte" bind:group={theme} />
55
+
<label for="theme-latte">🌻 Latte</label>
56
+
</div>
57
+
</div>
58
+
</div>
31
59
{/snippet}
+5
packages/panel/src/routes/+layout.svelte
+5
packages/panel/src/routes/+layout.svelte
···
16
16
import Toaster from "./Toaster.svelte";
17
17
import Dialog from "./Dialog.svelte";
18
18
import { AnimationFrames } from "runed";
19
+
import { onMount } from "svelte";
19
20
20
21
let { children } = $props();
21
22
22
23
new AnimationFrames(() => {
23
24
windowWidth = window.innerWidth;
25
+
});
26
+
27
+
onMount(() => {
28
+
document.documentElement.setAttribute("class", localStorage.getItem("luminary-theme") ?? "macchiato");
24
29
});
25
30
</script>
26
31