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