|  | 
|  | 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: #0000FF; | 
|  | 11 | +    --dark-hl-4: #569CD6; | 
|  | 12 | +    --light-hl-5: #0070C1; | 
|  | 13 | +    --dark-hl-5: #4FC1FF; | 
|  | 14 | +    --light-hl-6: #795E26; | 
|  | 15 | +    --dark-hl-6: #DCDCAA; | 
|  | 16 | +    --light-hl-7: #098658; | 
|  | 17 | +    --dark-hl-7: #B5CEA8; | 
|  | 18 | +    --light-hl-8: #267F99; | 
|  | 19 | +    --dark-hl-8: #4EC9B0; | 
|  | 20 | +    --light-hl-9: #008000; | 
|  | 21 | +    --dark-hl-9: #6A9955; | 
|  | 22 | +    --light-code-background: #F5F5F5; | 
|  | 23 | +    --dark-code-background: #1E1E1E; | 
|  | 24 | +} | 
|  | 25 | + | 
|  | 26 | +@media (prefers-color-scheme: light) { :root { | 
|  | 27 | +    --hl-0: var(--light-hl-0); | 
|  | 28 | +    --hl-1: var(--light-hl-1); | 
|  | 29 | +    --hl-2: var(--light-hl-2); | 
|  | 30 | +    --hl-3: var(--light-hl-3); | 
|  | 31 | +    --hl-4: var(--light-hl-4); | 
|  | 32 | +    --hl-5: var(--light-hl-5); | 
|  | 33 | +    --hl-6: var(--light-hl-6); | 
|  | 34 | +    --hl-7: var(--light-hl-7); | 
|  | 35 | +    --hl-8: var(--light-hl-8); | 
|  | 36 | +    --hl-9: var(--light-hl-9); | 
|  | 37 | +    --code-background: var(--light-code-background); | 
|  | 38 | +} } | 
|  | 39 | + | 
|  | 40 | +@media (prefers-color-scheme: dark) { :root { | 
|  | 41 | +    --hl-0: var(--dark-hl-0); | 
|  | 42 | +    --hl-1: var(--dark-hl-1); | 
|  | 43 | +    --hl-2: var(--dark-hl-2); | 
|  | 44 | +    --hl-3: var(--dark-hl-3); | 
|  | 45 | +    --hl-4: var(--dark-hl-4); | 
|  | 46 | +    --hl-5: var(--dark-hl-5); | 
|  | 47 | +    --hl-6: var(--dark-hl-6); | 
|  | 48 | +    --hl-7: var(--dark-hl-7); | 
|  | 49 | +    --hl-8: var(--dark-hl-8); | 
|  | 50 | +    --hl-9: var(--dark-hl-9); | 
|  | 51 | +    --code-background: var(--dark-code-background); | 
|  | 52 | +} } | 
|  | 53 | + | 
|  | 54 | +body.light { | 
|  | 55 | +    --hl-0: var(--light-hl-0); | 
|  | 56 | +    --hl-1: var(--light-hl-1); | 
|  | 57 | +    --hl-2: var(--light-hl-2); | 
|  | 58 | +    --hl-3: var(--light-hl-3); | 
|  | 59 | +    --hl-4: var(--light-hl-4); | 
|  | 60 | +    --hl-5: var(--light-hl-5); | 
|  | 61 | +    --hl-6: var(--light-hl-6); | 
|  | 62 | +    --hl-7: var(--light-hl-7); | 
|  | 63 | +    --hl-8: var(--light-hl-8); | 
|  | 64 | +    --hl-9: var(--light-hl-9); | 
|  | 65 | +    --code-background: var(--light-code-background); | 
|  | 66 | +} | 
|  | 67 | + | 
|  | 68 | +body.dark { | 
|  | 69 | +    --hl-0: var(--dark-hl-0); | 
|  | 70 | +    --hl-1: var(--dark-hl-1); | 
|  | 71 | +    --hl-2: var(--dark-hl-2); | 
|  | 72 | +    --hl-3: var(--dark-hl-3); | 
|  | 73 | +    --hl-4: var(--dark-hl-4); | 
|  | 74 | +    --hl-5: var(--dark-hl-5); | 
|  | 75 | +    --hl-6: var(--dark-hl-6); | 
|  | 76 | +    --hl-7: var(--dark-hl-7); | 
|  | 77 | +    --hl-8: var(--dark-hl-8); | 
|  | 78 | +    --hl-9: var(--dark-hl-9); | 
|  | 79 | +    --code-background: var(--dark-code-background); | 
|  | 80 | +} | 
|  | 81 | + | 
|  | 82 | +.hl-0 { color: var(--hl-0); } | 
|  | 83 | +.hl-1 { color: var(--hl-1); } | 
|  | 84 | +.hl-2 { color: var(--hl-2); } | 
|  | 85 | +.hl-3 { color: var(--hl-3); } | 
|  | 86 | +.hl-4 { color: var(--hl-4); } | 
|  | 87 | +.hl-5 { color: var(--hl-5); } | 
|  | 88 | +.hl-6 { color: var(--hl-6); } | 
|  | 89 | +.hl-7 { color: var(--hl-7); } | 
|  | 90 | +.hl-8 { color: var(--hl-8); } | 
|  | 91 | +.hl-9 { color: var(--hl-9); } | 
|  | 92 | +pre, code { background: var(--code-background); } | 
0 commit comments