finxol.io
A very simple single-file PDS home page to list active users
add automatic dark theme
+18
-1
src/style.css
+18
-1
src/style.css
···
1
+
:root {
2
+
--background: #f2f2f2;
3
+
--foreground: #111;
4
+
--card-bg: #eaeaea;
5
+
--card-text: #333;
6
+
7
+
@media screen and (prefers-color-scheme: dark) {
8
+
--background: #191919;
9
+
--foreground: #f5f5f5;
10
+
--card-bg: #262626;
11
+
--card-text: #f5f5f5;
12
+
}
13
+
}
14
+
1
15
body {
2
16
margin: 0;
3
17
padding: 0;
···
7
21
flex-direction: column;
8
22
align-items: center;
9
23
justify-content: start;
24
+
background-color: var(--background);
25
+
color: var(--foreground);
10
26
}
11
27
12
28
main {
···
59
75
gap: 1rem;
60
76
61
77
width: 100%;
62
-
background-color: #f5f5f5;
78
+
background-color: var(--card-bg);
79
+
color: var(--card-text);
63
80
border-radius: 0.5rem;
64
81
padding: 1rem;
65
82