WIP. A little custom music server
use shadcn's theme
+41
-93
+41
-43
web/src/styles.css
+41
-43
web/src/styles.css
···
4
4
@custom-variant dark (&:is(.dark *));
5
5
6
6
:root {
7
+
--radius: 0.65rem;
7
8
--background: oklch(1 0 0);
8
-
--foreground: oklch(0.145 0 0);
9
+
--foreground: oklch(0.141 0.005 285.823);
9
10
--card: oklch(1 0 0);
10
-
--card-foreground: oklch(0.145 0 0);
11
+
--card-foreground: oklch(0.141 0.005 285.823);
11
12
--popover: oklch(1 0 0);
12
-
--popover-foreground: oklch(0.145 0 0);
13
-
--primary: oklch(0.205 0 0);
14
-
--primary-foreground: oklch(0.985 0 0);
15
-
--secondary: oklch(0.97 0 0);
16
-
--secondary-foreground: oklch(0.205 0 0);
17
-
--muted: oklch(0.97 0 0);
18
-
--muted-foreground: oklch(0.556 0 0);
19
-
--accent: oklch(0.97 0 0);
20
-
--accent-foreground: oklch(0.205 0 0);
13
+
--popover-foreground: oklch(0.141 0.005 285.823);
14
+
--primary: oklch(0.705 0.213 47.604);
15
+
--primary-foreground: oklch(0.98 0.016 73.684);
16
+
--secondary: oklch(0.967 0.001 286.375);
17
+
--secondary-foreground: oklch(0.21 0.006 285.885);
18
+
--muted: oklch(0.967 0.001 286.375);
19
+
--muted-foreground: oklch(0.552 0.016 285.938);
20
+
--accent: oklch(0.967 0.001 286.375);
21
+
--accent-foreground: oklch(0.21 0.006 285.885);
21
22
--destructive: oklch(0.577 0.245 27.325);
22
-
--destructive-foreground: oklch(0.577 0.245 27.325);
23
-
--border: oklch(0.922 0 0);
24
-
--input: oklch(0.922 0 0);
25
-
--ring: oklch(0.708 0 0);
23
+
--border: oklch(0.92 0.004 286.32);
24
+
--input: oklch(0.92 0.004 286.32);
25
+
--ring: oklch(0.705 0.213 47.604);
26
26
--chart-1: oklch(0.646 0.222 41.116);
27
27
--chart-2: oklch(0.6 0.118 184.704);
28
28
--chart-3: oklch(0.398 0.07 227.392);
29
29
--chart-4: oklch(0.828 0.189 84.429);
30
30
--chart-5: oklch(0.769 0.188 70.08);
31
-
--radius: 0.625rem;
32
31
--sidebar: oklch(0.985 0 0);
33
-
--sidebar-foreground: oklch(0.145 0 0);
34
-
--sidebar-primary: oklch(0.205 0 0);
35
-
--sidebar-primary-foreground: oklch(0.985 0 0);
36
-
--sidebar-accent: oklch(0.97 0 0);
37
-
--sidebar-accent-foreground: oklch(0.205 0 0);
38
-
--sidebar-border: oklch(0.922 0 0);
39
-
--sidebar-ring: oklch(0.708 0 0);
32
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
33
+
--sidebar-primary: oklch(0.705 0.213 47.604);
34
+
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
35
+
--sidebar-accent: oklch(0.967 0.001 286.375);
36
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
37
+
--sidebar-border: oklch(0.92 0.004 286.32);
38
+
--sidebar-ring: oklch(0.705 0.213 47.604);
40
39
}
41
40
42
41
.dark {
43
-
--background: oklch(0.145 0 0);
42
+
--background: oklch(0.141 0.005 285.823);
44
43
--foreground: oklch(0.985 0 0);
45
-
--card: oklch(0.145 0 0);
44
+
--card: oklch(0.21 0.006 285.885);
46
45
--card-foreground: oklch(0.985 0 0);
47
-
--popover: oklch(0.145 0 0);
46
+
--popover: oklch(0.21 0.006 285.885);
48
47
--popover-foreground: oklch(0.985 0 0);
49
-
--primary: oklch(0.985 0 0);
50
-
--primary-foreground: oklch(0.205 0 0);
51
-
--secondary: oklch(0.269 0 0);
48
+
--primary: oklch(0.646 0.222 41.116);
49
+
--primary-foreground: oklch(0.98 0.016 73.684);
50
+
--secondary: oklch(0.274 0.006 286.033);
52
51
--secondary-foreground: oklch(0.985 0 0);
53
-
--muted: oklch(0.269 0 0);
54
-
--muted-foreground: oklch(0.708 0 0);
55
-
--accent: oklch(0.269 0 0);
52
+
--muted: oklch(0.274 0.006 286.033);
53
+
--muted-foreground: oklch(0.705 0.015 286.067);
54
+
--accent: oklch(0.274 0.006 286.033);
56
55
--accent-foreground: oklch(0.985 0 0);
57
-
--destructive: oklch(0.396 0.141 25.723);
58
-
--destructive-foreground: oklch(0.637 0.237 25.331);
59
-
--border: oklch(0.269 0 0);
60
-
--input: oklch(0.269 0 0);
61
-
--ring: oklch(0.439 0 0);
56
+
--destructive: oklch(0.704 0.191 22.216);
57
+
--border: oklch(1 0 0 / 10%);
58
+
--input: oklch(1 0 0 / 15%);
59
+
--ring: oklch(0.646 0.222 41.116);
62
60
--chart-1: oklch(0.488 0.243 264.376);
63
61
--chart-2: oklch(0.696 0.17 162.48);
64
62
--chart-3: oklch(0.769 0.188 70.08);
65
63
--chart-4: oklch(0.627 0.265 303.9);
66
64
--chart-5: oklch(0.645 0.246 16.439);
67
-
--sidebar: oklch(0.205 0 0);
65
+
--sidebar: oklch(0.21 0.006 285.885);
68
66
--sidebar-foreground: oklch(0.985 0 0);
69
-
--sidebar-primary: oklch(0.488 0.243 264.376);
70
-
--sidebar-primary-foreground: oklch(0.985 0 0);
71
-
--sidebar-accent: oklch(0.269 0 0);
67
+
--sidebar-primary: oklch(0.646 0.222 41.116);
68
+
--sidebar-primary-foreground: oklch(0.98 0.016 73.684);
69
+
--sidebar-accent: oklch(0.274 0.006 286.033);
72
70
--sidebar-accent-foreground: oklch(0.985 0 0);
73
-
--sidebar-border: oklch(0.269 0 0);
74
-
--sidebar-ring: oklch(0.439 0 0);
71
+
--sidebar-border: oklch(1 0 0 / 10%);
72
+
--sidebar-ring: oklch(0.646 0.222 41.116);
75
73
}
76
74
77
75
@theme inline {
-50
web/tailwind.config.ts
-50
web/tailwind.config.ts
···
2
2
3
3
export default {
4
4
content: ["./src/**/*.{ts,tsx}"],
5
-
theme: {
6
-
extend: {
7
-
colors: {
8
-
brand: {
9
-
orange: {
10
-
DEFAULT: "oklch(0.7154 0.1862 42.53)",
11
-
light: "oklch(0.7154 0.1862 42.53 / 8%)",
12
-
},
13
-
},
14
-
border: "hsl(var(--border))",
15
-
input: "hsl(var(--input))",
16
-
ring: "hsl(var(--ring))",
17
-
background: "hsl(var(--background))",
18
-
foreground: "hsl(var(--foreground))",
19
-
primary: {
20
-
DEFAULT: "hsl(var(--primary))",
21
-
foreground: "hsl(var(--primary-foreground))",
22
-
},
23
-
secondary: {
24
-
DEFAULT: "hsl(var(--secondary))",
25
-
foreground: "hsl(var(--secondary-foreground))",
26
-
},
27
-
destructive: {
28
-
DEFAULT: "hsl(var(--destructive))",
29
-
foreground: "hsl(var(--destructive-foreground))",
30
-
},
31
-
muted: {
32
-
DEFAULT: "hsl(var(--muted))",
33
-
foreground: "hsl(var(--muted-foreground))",
34
-
},
35
-
accent: {
36
-
DEFAULT: "hsl(var(--accent))",
37
-
foreground: "hsl(var(--accent-foreground))",
38
-
},
39
-
popover: {
40
-
DEFAULT: "hsl(var(--popover))",
41
-
foreground: "hsl(var(--popover-foreground))",
42
-
},
43
-
card: {
44
-
DEFAULT: "hsl(var(--card))",
45
-
foreground: "hsl(var(--card-foreground))",
46
-
},
47
-
},
48
-
borderRadius: {
49
-
lg: "var(--radius)",
50
-
md: "calc(var(--radius) - 2px)",
51
-
sm: "calc(var(--radius) - 4px)",
52
-
},
53
-
},
54
-
},
55
5
} satisfies Config;