|
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