vielle.dev
[WIP] A simple wake-on-lan service
use theme in webapp
+55
-3
+3
-3
web/src/App.svelte
+3
-3
web/src/App.svelte
···
1
1
<script lang="ts">
2
-
import Api from "./lib/api";
2
+
import { config } from "./lib/api";
3
3
import Power from "./lib/Power.svelte";
4
-
5
-
const config = await Api.config();
4
+
import ThemeProvider from "./lib/ThemeProvider.svelte";
6
5
7
6
const targets = [
8
7
...Object.entries(config.targets)
···
19
18
console.log(config);
20
19
</script>
21
20
21
+
<ThemeProvider />
22
22
<h1>Wake on Lan</h1>
23
23
{#each targets as [name, { mac, ip, url }]}
24
24
<Power {name} {mac} {ip} {url} />
+50
web/src/lib/ThemeProvider.svelte
+50
web/src/lib/ThemeProvider.svelte
···
1
+
<script lang="ts">
2
+
import { config } from "./api";
3
+
4
+
const rgb = ([r, g, b]: [number, number, number]) => `rgb(${r}, ${g}, ${b})`;
5
+
6
+
const custom = {
7
+
"--theme-background": rgb(config.theme.background),
8
+
"--theme-foreground": rgb(config.theme.foreground),
9
+
"--theme-text": rgb(config.theme.text),
10
+
"--theme-text-secondary": rgb(config.theme.text_secondary),
11
+
"--theme-accent-success": rgb(config.theme.accent_success),
12
+
"--theme-accent-fail": rgb(config.theme.accent_fail),
13
+
"--theme-link": rgb(config.theme.link),
14
+
"--theme-link-visited": rgb(config.theme.link_visited),
15
+
"--theme-highlight": rgb(config.theme.highlight),
16
+
"--theme-highlight-opacity": `${config.theme.highlight_opacity / 100}`,
17
+
};
18
+
19
+
for (const [k, v] of Object.entries(custom))
20
+
document.body.style.setProperty(k, v);
21
+
</script>
22
+
23
+
<style>
24
+
:global {
25
+
@layer reset {
26
+
* {
27
+
margin: 0;
28
+
padding: 0;
29
+
box-sizing: border-box;
30
+
font-family: inherit;
31
+
}
32
+
}
33
+
34
+
a {
35
+
color: var(--theme-link);
36
+
37
+
&:visited {
38
+
color: var(--theme-link-visited);
39
+
}
40
+
41
+
&:hover {
42
+
text-decoration-style: dotted;
43
+
}
44
+
45
+
&:active {
46
+
text-decoration: none;
47
+
}
48
+
}
49
+
}
50
+
</style>