10 --light-hl-4: #0000FF;
12 --light-hl-5: #0070C1;
14 --light-hl-6: #000000;
16 --light-code-background: #FFFFFF;
17 --dark-code-background: #1E1E1E;
20 @media (prefers-color-scheme: light
) { :root
{
21 --hl-0: var
(--light-hl-0
);
22 --hl-1: var
(--light-hl-1
);
23 --hl-2: var
(--light-hl-2
);
24 --hl-3: var
(--light-hl-3
);
25 --hl-4: var
(--light-hl-4
);
26 --hl-5: var
(--light-hl-5
);
27 --hl-6: var
(--light-hl-6
);
28 --code-background: var
(--light-code-background
);
31 @media (prefers-color-scheme: dark
) { :root
{
32 --hl-0: var
(--dark-hl-0
);
33 --hl-1: var
(--dark-hl-1
);
34 --hl-2: var
(--dark-hl-2
);
35 --hl-3: var
(--dark-hl-3
);
36 --hl-4: var
(--dark-hl-4
);
37 --hl-5: var
(--dark-hl-5
);
38 --hl-6: var
(--dark-hl-6
);
39 --code-background: var
(--dark-code-background
);
42 :root
[data-theme
='light'] {
43 --hl-0: var
(--light-hl-0
);
44 --hl-1: var
(--light-hl-1
);
45 --hl-2: var
(--light-hl-2
);
46 --hl-3: var
(--light-hl-3
);
47 --hl-4: var
(--light-hl-4
);
48 --hl-5: var
(--light-hl-5
);
49 --hl-6: var
(--light-hl-6
);
50 --code-background: var
(--light-code-background
);
53 :root
[data-theme
='dark'] {
54 --hl-0: var
(--dark-hl-0
);
55 --hl-1: var
(--dark-hl-1
);
56 --hl-2: var
(--dark-hl-2
);
57 --hl-3: var
(--dark-hl-3
);
58 --hl-4: var
(--dark-hl-4
);
59 --hl-5: var
(--dark-hl-5
);
60 --hl-6: var
(--dark-hl-6
);
61 --code-background: var
(--dark-code-background
);
64 .hl-0 { color: var
(--hl-0
); }
65 .hl-1 { color: var
(--hl-1
); }
66 .hl-2 { color: var
(--hl-2
); }
67 .hl-3 { color: var
(--hl-3
); }
68 .hl-4 { color: var
(--hl-4
); }
69 .hl-5 { color: var
(--hl-5
); }
70 .hl-6 { color: var
(--hl-6
); }
71 pre
, code
{ background: var
(--code-background
); }