1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
/* light gray */
:root {
--color-head: hsl(0, 0%, 85%);
--color-body: hsl(0, 0%, 95%);
--color-text: hsl(0, 0%, 100%);
--color-post-head: hsl(0, 0%, 85%);
--color-post-body: hsl(0, 0%, 98%);
--color-table-head: hsl(0, 0%, 85%);
--color-table-foot: hsl(0, 0%, 90%);
--color-table-body: hsl(0, 0%, 98%);
--color-table-stripe: hsl(0, 0%, 96%);
--color-focus: hsl(210, 40%, 65%);
--color-blue: hsl(240, 100%, 50%);
--color-red: hsl(0, 100%, 35%);
--color-green: hsl(120, 100%, 30%);
--color-accent: hsl(0, 60%, 40%);
}
/* dark gray */
@media (prefers-color-scheme: dark) {
:root {
--color-head: hsl(0, 0%, 75%);
--color-body: hsl(0, 0%, 85%);
--color-text: hsl(0, 0%, 95%);
--color-post-head: hsl(0, 0%, 75%);
--color-post-body: hsl(0, 0%, 90%);
--color-table-head: hsl(0, 0%, 75%);
--color-table-foot: hsl(0, 0%, 80%);
--color-table-body: hsl(0, 0%, 90%);
--color-table-stripe: hsl(0, 0%, 88%);
--color-focus: hsl(210, 40%, 60%);
--color-blue: hsl(240, 100%, 40%);
--color-red: hsl(0, 100%, 35%);
--color-green: hsl(120, 100%, 30%);
--color-accent: hsl(0, 60%, 35%);
}}
|
