|  | 
|  | 1 | +:root { | 
|  | 2 | +    --light-hl-0: #000000; | 
|  | 3 | +    --dark-hl-0: #D4D4D4; | 
|  | 4 | +    --light-hl-1: #AF00DB; | 
|  | 5 | +    --dark-hl-1: #C586C0; | 
|  | 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: #0000FF; | 
|  | 13 | +    --dark-hl-5: #569CD6; | 
|  | 14 | +    --light-code-background: #FFFFFF; | 
|  | 15 | +    --dark-code-background: #1E1E1E; | 
|  | 16 | +} | 
|  | 17 | + | 
|  | 18 | +@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 | +    --code-background: var(--light-code-background); | 
|  | 26 | +} } | 
|  | 27 | + | 
|  | 28 | +@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 | +    --code-background: var(--dark-code-background); | 
|  | 36 | +} } | 
|  | 37 | + | 
|  | 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); | 
|  | 45 | +    --code-background: var(--light-code-background); | 
|  | 46 | +} | 
|  | 47 | + | 
|  | 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); | 
|  | 55 | +    --code-background: var(--dark-code-background); | 
|  | 56 | +} | 
|  | 57 | + | 
|  | 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 | +pre, code { background: var(--code-background); } | 
0 commit comments