Create hightlight.css

Author: avonrylew

docs/assets/hightlight.css

@@ -0,0 +1,110 @@
+:root {
+  --light-hl-0: #001080;
+  --dark-hl-0: #9cdcfe;
+  --light-hl-1: #000000;
+  --dark-hl-1: #d4d4d4;
+  --light-hl-2: #000000;
+  --dark-hl-2: #c8c8c8;
+  --light-hl-3: #008000;
+  --dark-hl-3: #6a9955;
+  --light-hl-4: #af00db;
+  --dark-hl-4: #c586c0;
+  --light-hl-5: #a31515;
+  --dark-hl-5: #ce9178;
+  --light-hl-6: #0000ff;
+  --dark-hl-6: #569cd6;
+  --light-hl-7: #0070c1;
+  --dark-hl-7: #4fc1ff;
+  --light-hl-8: #795e26;
+  --dark-hl-8: #dcdcaa;
+  --light-code-background: #f5f5f5;
+  --dark-code-background: #1e1e1e;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --code-background: var(--light-code-background);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --code-background: var(--dark-code-background);
+  }
+}
+
+body.light {
+  --hl-0: var(--light-hl-0);
+  --hl-1: var(--light-hl-1);
+  --hl-2: var(--light-hl-2);
+  --hl-3: var(--light-hl-3);
+  --hl-4: var(--light-hl-4);
+  --hl-5: var(--light-hl-5);
+  --hl-6: var(--light-hl-6);
+  --hl-7: var(--light-hl-7);
+  --hl-8: var(--light-hl-8);
+  --code-background: var(--light-code-background);
+}
+
+body.dark {
+  --hl-0: var(--dark-hl-0);
+  --hl-1: var(--dark-hl-1);
+  --hl-2: var(--dark-hl-2);
+  --hl-3: var(--dark-hl-3);
+  --hl-4: var(--dark-hl-4);
+  --hl-5: var(--dark-hl-5);
+  --hl-6: var(--dark-hl-6);
+  --hl-7: var(--dark-hl-7);
+  --hl-8: var(--dark-hl-8);
+  --code-background: var(--dark-code-background);
+}
+
+.hl-0 {
+  color: var(--hl-0);
+}
+.hl-1 {
+  color: var(--hl-1);
+}
+.hl-2 {
+  color: var(--hl-2);
+}
+.hl-3 {
+  color: var(--hl-3);
+}
+.hl-4 {
+  color: var(--hl-4);
+}
+.hl-5 {
+  color: var(--hl-5);
+}
+.hl-6 {
+  color: var(--hl-6);
+}
+.hl-7 {
+  color: var(--hl-7);
+}
+.hl-8 {
+  color: var(--hl-8);
+}
+pre,
+code {
+  background: var(--code-background);
+}