A focused Docker Compose management web application.
feat: terminal theme
+28
-3
+28
-3
packages/panel/src/lib/component/LogTerminal.svelte
+28
-3
packages/panel/src/lib/component/LogTerminal.svelte
···
3
3
import { WebLinksAddon } from "@xterm/addon-web-links";
4
4
import type { Attachment } from "svelte/attachments";
5
5
import { FitAddon } from "@xterm/addon-fit";
6
-
import { Terminal } from "@xterm/xterm";
6
+
import { Terminal, type ITheme } from "@xterm/xterm";
7
7
import "@xterm/xterm/css/xterm.css";
8
8
import { client } from "$lib/api";
9
9
import { Backoff } from "$lib";
10
10
11
11
let { project }: { project: string } = $props();
12
+
let loading = $state(true);
13
+
14
+
function getComputedCSSVar(name: string) {
15
+
return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
16
+
}
12
17
13
-
let loading = $state(true);
18
+
const theme = Object.fromEntries(
19
+
Object.entries({
20
+
cursor: "rosewater",
21
+
selectionForeground: "base",
22
+
selectionBackground: "lavender",
23
+
background: "crust",
24
+
foreground: "text",
25
+
black: "crust",
26
+
red: "red",
27
+
green: "green",
28
+
yellow: "yellow",
29
+
blue: "blue",
30
+
magenta: "pink",
31
+
cyan: "teal",
32
+
white: "text",
33
+
} satisfies ITheme).map(([key, varName]) => [key, getComputedCSSVar(varName)]),
34
+
);
14
35
15
36
const terminal: Attachment<HTMLElement> = (el) => {
16
-
const terminal = new Terminal();
37
+
const terminal = new Terminal({ fontFamily: "DejaVu Mono", theme });
17
38
const fitAddon = new FitAddon();
18
39
19
40
terminal.loadAddon(new WebLinksAddon());
···
76
97
<style lang="scss">
77
98
.container {
78
99
position: relative;
100
+
101
+
background-color: var(--crust);
102
+
border-radius: 10px;
103
+
padding: 10px;
79
104
}
80
105
81
106
.positioner {