Pretty good progress on accessible syntax themes

_config.yml

@@ -22,7 +22,7 @@ description: A modern, highly customizable, responsive Jekyll template for cours
 # TODO(template): this should be built from the staff list...
 author: Various Bears
 # You should use either light or dark as the theme.
-color_scheme: light
+color_scheme: dark
 
 # TODO(setup): Set this to the semester, e.g. /sp24, (faXX / spXX / suXX / wiXX )
 baseurl: '/berkeley-class-site' # the subpath of your site, which should just be the semester.

_sass/color_schemes/dark.scss

@@ -22,7 +22,7 @@ $search-result-preview-color: $grey-dk-000;
 $border-color: $grey-dk-200;
 /////////////////// Add modifications below
 
-@import '../snytax_highliters/a11y-dark.css';
+@import '../snytax_highliters/a11y-dark';
 
 // Override dark-mode variables here
 $grey-dk-400: #0C0A0E !default;

_sass/snytax_highliters/a11y-dark.css

@@ -1,99 +1,136 @@
 /* a11y-dark theme */
 /* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
 /* @author: ericwbailey */
+/* Adapted to pygments/rouge by @cycomachead */
 
-/* Comment */
-.hljs-comment,
-.hljs-quote {
-  color: #d4d0ab;
+:root {
+  --pygments-a11y-bg-color: #2b2b2b;
+  --pygments-a11y-dark-on-light: #000; /* Used for errors */
+  --pygments-a11y-light-gray: #d4d0ab; /* comments */
+  --pygments-a11y-dark-gray: #f8f8f2;
+  --pygments-a11y-purple: #dcc6e0;
+  --pygments-a11y-blue: #00e0e0;
+  --pygments-a11y-green: #abe338;
+  --pygments-a11y-yellow: #ffd700; /* attributes */
+  --pygments-a11y-orange: #f5ab35;
+  --pygments-a11y-red: #ffa07a;
 }
 
-/* Red */
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag,
-.hljs-name,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-regexp,
-.hljs-deletion {
-  color: #ffa07a;
+.highlight,
+pre.highlight {
+  background: var(--pygments-a11y-bg-color);
+  color: var(--pygments-a11y-dark-gray);
 }
 
-/* Orange */
-.hljs-number,
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-literal,
-.hljs-type,
-.hljs-params,
-.hljs-meta,
-.hljs-link {
-  color: #f5ab35;
+.highlight pre,
+.highlight .hll,
+.highlight .w {
+  background: var(--pygments-a11y-bg-color);
 }
 
-/* Yellow */
-.hljs-attribute {
-  color: #ffd700;
+.highlight .c {
+  color: var(--pygments-a11y-light-gray);
+  font-style: italic;
 }
 
-/* Green */
-.hljs-string,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition {
-  color: #abe338;
+.highlight .err {
+  color: var(--pygments-a11y-dark-on-light);
+  background-color: var(--pygments-a11y-red);
 }
 
-/* Blue */
-.hljs-title,
-.hljs-section {
-  color: #00e0e0;
+.highlight .k,
+.highlight .kc,
+.highlight .kd,
+.highlight .kn,
+.highlight .kp,
+.highlight .kr,
+.highlight .kt {
+  color: var(--pygments-a11y-purple);
 }
 
-/* Purple */
-.hljs-keyword,
-.hljs-selector-tag {
-  color: #dcc6e0;
+.highlight .n,
+.highlight .o,
+.highlight .p,
+.highlight .nf,
+.highlight .nn,
+.highlight .nx {
+  color: var(--pygments-a11y-dark-gray);
 }
 
-.hljs {
-  display: block;
-  overflow-x: auto;
-  background: #2b2b2b;
-  color: #f8f8f2;
-  padding: 0.5em;
+.highlight .cm,
+.highlight .cp,
+.highlight .c1,
+.highlight .cs {
+  color: var(--pygments-a11y-light-gray);
+  font-style: italic;
 }
 
-.hljs-emphasis {
+.highlight .ge {
   font-style: italic;
 }
 
-.hljs-strong {
-  font-weight: bold;
-}
-
-@media screen and (-ms-high-contrast: active) {
-  .hljs-addition,
-  .hljs-attribute,
-  .hljs-built_in,
-  .hljs-builtin-name,
-  .hljs-bullet,
-  .hljs-comment,
-  .hljs-link,
-  .hljs-literal,
-  .hljs-meta,
-  .hljs-number,
-  .hljs-params,
-  .hljs-string,
-  .hljs-symbol,
-  .hljs-type,
-  .hljs-quote {
-        color: highlight;
-    }
-
-    .hljs-keyword,
-    .hljs-selector-tag {
-        font-weight: bold;
-    }
+.highlight .gs,
+.highlight .ow {
+  font-weight: 700;
+}
+
+.highlight .l,
+.highlight .ld,
+.highlight .s,
+.highlight .sb,
+.highlight .sc,
+.highlight .sd,
+.highlight .s2,
+.highlight .se,
+.highlight .sh,
+.highlight .si,
+.highlight .sx,
+.highlight .s1 {
+  color: var(--pygments-a11y-green);
+}
+
+.highlight .bp,
+.highlight .nb,
+.highlight .nc,
+.highlight .no,
+.highlight .nd,
+.highlight .ni,
+.highlight .ne,
+.highlight .nl,
+.highlight .nv,
+.highlight .py,
+.highlight .vc,
+.highlight .vg {
+  color: var(--pygments-a11y-orange); /* #ca7601; */
+}
+
+.highlight .gd,
+.highlight .nt,
+.highlight .vi,
+.highlight .language-json .w + .s2 {
+  color: var(--pygments-a11y-red); /* #e35549 */
+}
+
+.highlight .il,
+.highlight .m,
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .mo,
+.highlight .na {
+  color: var(--pygments-a11y-yellow); /* #b66a00 */
+}
+
+.highlight .sr,
+.highlight .ss,
+.highlight .language-json .kc {
+  color: var(--pygments-a11y-blue); /*#0083bb */
+}
+
+.highlight .gu {
+  color: var(--pygments-a11y-light-gray); /* was #75715e kind of dark yellow */
+}
+
+.highlight .gi {
+  color: var(--pygments-a11y-green); /* was #43d089 seafoam ish */
 }