|
1 | 1 | :root {
|
2 |
| - --light-hl-0: #AF00DB; |
3 |
| - --dark-hl-0: #C586C0; |
4 |
| - --light-hl-1: #000000; |
5 |
| - --dark-hl-1: #D4D4D4; |
6 |
| - --light-hl-2: #001080; |
7 |
| - --dark-hl-2: #9CDCFE; |
8 |
| - --light-hl-3: #A31515; |
9 |
| - --dark-hl-3: #CE9178; |
10 |
| - --light-hl-4: #795E26; |
11 |
| - --dark-hl-4: #DCDCAA; |
12 |
| - --light-hl-5: #008000; |
13 |
| - --dark-hl-5: #6A9955; |
14 | 2 | --light-code-background: #FFFFFF;
|
15 | 3 | --dark-code-background: #1E1E1E;
|
16 | 4 | }
|
17 | 5 |
|
18 | 6 | @media (prefers-color-scheme: light) { :root {
|
19 |
| - --hl-0: var(--light-hl-0); |
20 |
| - --hl-1: var(--light-hl-1); |
21 |
| - --hl-2: var(--light-hl-2); |
22 |
| - --hl-3: var(--light-hl-3); |
23 |
| - --hl-4: var(--light-hl-4); |
24 |
| - --hl-5: var(--light-hl-5); |
25 | 7 | --code-background: var(--light-code-background);
|
26 | 8 | } }
|
27 | 9 |
|
28 | 10 | @media (prefers-color-scheme: dark) { :root {
|
29 |
| - --hl-0: var(--dark-hl-0); |
30 |
| - --hl-1: var(--dark-hl-1); |
31 |
| - --hl-2: var(--dark-hl-2); |
32 |
| - --hl-3: var(--dark-hl-3); |
33 |
| - --hl-4: var(--dark-hl-4); |
34 |
| - --hl-5: var(--dark-hl-5); |
35 | 11 | --code-background: var(--dark-code-background);
|
36 | 12 | } }
|
37 | 13 |
|
38 |
| -body.light { |
39 |
| - --hl-0: var(--light-hl-0); |
40 |
| - --hl-1: var(--light-hl-1); |
41 |
| - --hl-2: var(--light-hl-2); |
42 |
| - --hl-3: var(--light-hl-3); |
43 |
| - --hl-4: var(--light-hl-4); |
44 |
| - --hl-5: var(--light-hl-5); |
| 14 | +:root[data-theme='light'] { |
45 | 15 | --code-background: var(--light-code-background);
|
46 | 16 | }
|
47 | 17 |
|
48 |
| -body.dark { |
49 |
| - --hl-0: var(--dark-hl-0); |
50 |
| - --hl-1: var(--dark-hl-1); |
51 |
| - --hl-2: var(--dark-hl-2); |
52 |
| - --hl-3: var(--dark-hl-3); |
53 |
| - --hl-4: var(--dark-hl-4); |
54 |
| - --hl-5: var(--dark-hl-5); |
| 18 | +:root[data-theme='dark'] { |
55 | 19 | --code-background: var(--dark-code-background);
|
56 | 20 | }
|
57 | 21 |
|
58 |
| -.hl-0 { color: var(--hl-0); } |
59 |
| -.hl-1 { color: var(--hl-1); } |
60 |
| -.hl-2 { color: var(--hl-2); } |
61 |
| -.hl-3 { color: var(--hl-3); } |
62 |
| -.hl-4 { color: var(--hl-4); } |
63 |
| -.hl-5 { color: var(--hl-5); } |
64 | 22 | pre, code { background: var(--code-background); }
|
0 commit comments