add adaptive GitHub theme using light-dark(...)

CHANGES.md

@@ -3,6 +3,7 @@
 Themes:
 
 - added "vs Dark " theme [Twineee1][]
+- added `GitHub Adaptive (Light & Dark)` theme [makl11][]
 
 New Grammars:
 
@@ -27,6 +28,10 @@ Core Grammars:
 - fix(css) `unicode-range` parsing, issue #4253 [Kerry Shetline][]
 - fix(csharp) Support digit separators [te-ing][]
 
+Developer Tools:
+
+- add support for checking a11y for themes with `light-dark(...)` colors to `tools/checkTheme.js`
+
 Documentation:
 
 - alphabetized languages + upper-cased BASIC in SUPPORTED_LANGUAGES.md [Adam Lui][]
@@ -55,6 +60,7 @@ CONTRIBUTORS
 [te-ing]: https://github.com/te-ing
 [Anthony Martin]: https://github.com/anthony-c-martin
 [NriotHrreion]: https://github.com/NriotHrreion
+[makl11]: https://github.com/makl11
 
 
 ## Version 11.11.1

src/styles/github-adaptive.css

@@ -0,0 +1,118 @@
+/*!
+  Theme: GitHub Adaptive (Light & Dark)
+  Description: A combination of @Hirse's GitHub Light and Dark themes that switches based on the user's system preference.
+  Authors: github.com, @Hirse
+*/
+
+
+:root {
+	color-scheme: light dark;
+}
+
+.hljs.light {
+	color-scheme: light;
+}
+.hljs.dark {
+	color-scheme: dark;
+}
+
+.hljs {
+	color: light-dark(#24292e, #c9d1d9);
+	background: light-dark(#ffffff, #0d1117);
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+	color: light-dark(#d73a49, #ff7b72);
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+	color: light-dark(#6f42c1, #d2a8ff);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+	color: light-dark(#005cc5, #79c0ff);
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+	color: light-dark(#032f62, #a5d6ff);
+}
+
+.hljs-built_in,
+.hljs-symbol {
+	color: light-dark(#e36209, #ffa657);
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+	color: light-dark(#6a737d, #8b949e);
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+	color: light-dark(#22863a, #7ee787);
+}
+
+.hljs-subst {
+	color: light-dark(#24292e, #c9d1d9);
+}
+
+.hljs-section {
+	color: light-dark(#005cc5, #1f6feb);
+	font-weight: bold;
+}
+
+.hljs-bullet {
+	color: light-dark(#735c0f, #f2cc60);
+}
+
+.hljs-emphasis {
+	color: light-dark(#24292e, #c9d1d9);
+	font-style: italic;
+}
+
+.hljs-strong {
+	color: light-dark(#24292e, #c9d1d9);
+	font-weight: bold;
+}
+
+.hljs-addition {
+	color: light-dark(#22863a, #aff5b4);
+	background-color: light-dark(#f0fff4, #033a16);
+}
+
+.hljs-deletion {
+	color: light-dark(#b31d28, #ffdcd7);
+	background-color: light-dark(#ffeef0, #67060c);
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+}

tools/checkTheme.js

@@ -187,6 +187,19 @@ function check_group(group, rules) {
   }
 }
 
+function is_light_dark(value) {
+  return typeof value === "string" && value.startsWith("light-dark");
+}
+
+function get_colors_from_light_dark(light_dark_value) {
+  light_dark_value = light_dark_value.trim();
+  light_dark_value = light_dark_value.substring(11, light_dark_value.length - 1);
+  let [light, dark] = light_dark_value.split(",");
+  light = light.trim();
+  dark = dark.trim();
+  return [light, dark];
+}
+
 const round2 = (x) => Math.round(x*100)/100;
 
 class CSSRule {
@@ -199,38 +212,85 @@ class CSSRule {
       }
       this.fg = rule.declarations.find(x => x.property =="color")?.value;
 
+      if (is_light_dark(this.bg)) {
+        [this.bg, this.bg_dark] = get_colors_from_light_dark(this.bg);
+      }
+      if (is_light_dark(this.fg)) {
+        [this.fg, this.fg_dark] = get_colors_from_light_dark(this.fg);
+      }
+
       if (this.bg) {
         this.bg = csscolors[this.bg] || this.bg;
       }
       if (this.fg) {
         this.fg = csscolors[this.fg] || this.fg;
       }
+      if (this.bg_dark) {
+        this.bg_dark = csscolors[this.bg_dark] || this.bg_dark;
+      }
+      if (this.fg_dark) {
+        this.fg_dark = csscolors[this.fg_dark] || this.fg_dark;
+      }
 
       // inherit from body if we're missing fg or bg
       if (this.hasColor) {
         if (!this.bg) this.bg = body.background;
         if (!this.fg) this.fg = body.foreground;
+        if (body?.hasLightDark) {
+          if (!this.bg_dark) this.bg_dark = body.backgroundDark;
+          if (!this.fg_dark) this.fg_dark = body.foregroundDark;
+        }
       }
     }
   }
+
   get background() {
     return this.bg
   }
 
   get foreground() {
     return this.fg
   }
+
+  get backgroundDark() {
+    return this.bg_dark;
+  }
+
+  get foregroundDark() {
+    return this.fg_dark;
+  }
+
   get hasColor() {
     if (!this.rule.declarations) return false;
     return this.fg || this.bg;
   }
+
+  get hasLightDark() {
+    if (!this.rule.declarations) return false;
+    return this.fg_dark || this.bg_dark;
+  }
+
   toString() {
+    if (this.hasLightDark) {
+      return ` light: ${this.foreground} on ${this.background}, dark: ${this.foregroundDark} on ${this.backgroundDark}`;
+    }
     return ` ${this.foreground} on ${this.background}`
   }
 
   contrastRatio() {
     if (!this.foreground) return "unknown (no fg)"
     if (!this.background) return "unknown (no bg)"
+    if (this.hasLightDark) {
+      const lightRatio = round2(wcagContrast.hex(this.foreground, this.background));
+
+      let darkRatio = "unknown";
+      if (!this.foregroundDark) darkRatio = "unknown (no fg)";
+      else if (!this.backgroundDark) darkRatio = "unknown (no bg)";
+      else darkRatio = round2(wcagContrast.hex(this.foregroundDark, this.backgroundDark));
+
+      return [lightRatio, darkRatio];
+    }
+
     return round2(wcagContrast.hex(this.foreground, this.background));
   }
 }
@@ -240,10 +300,17 @@ function contrast_report(rules) {
 
   var hljs = rules.find (x => x.selectors && x.selectors.includes(".hljs"));
   var body = new CSSRule(hljs);
+  const head = body.hasLightDark
+    ? ['ratio light', 'ratio dark', 'selector', 'fg light', 'bg light', 'fg dark', 'bg dark']
+    : ['ratio', 'selector', 'fg', 'bg'];
+  const colWidths = body.hasLightDark
+    ? [13, 12, 40, 10, 10, 10, 10]
+    : [7, 40, 10, 10];
+
   const table = new Table({
     chars: {'mid': '', 'left-mid': '', 'mid-mid': '', 'right-mid': ''},
-    head: ['ratio', 'selector', 'fg', 'bg'],
-    colWidths: [7, 40, 10, 10],
+    head,
+    colWidths,
     style: {
       head: ['grey']
     }
@@ -252,12 +319,23 @@ function contrast_report(rules) {
   rules.forEach(rule => {
     var color = new CSSRule(rule, body);
     if (!color.hasColor) return;
-    table.push([
-      color.contrastRatio(),
-      rule.selectors,
-      color.foreground,
-      color.background
-    ])
+    if (color.hasLightDark) {
+      table.push([
+        ...color.contrastRatio(),
+        rule.selectors,
+        color.foreground,
+        color.background,
+        color.foregroundDark,
+        color.backgroundDark
+      ]);
+    } else {
+      table.push([
+        color.contrastRatio(),
+        rule.selectors,
+        color.foreground,
+        color.background
+      ]);
+    }
     // console.log(r.selectors[0], color.contrastRatio(), color.toString());
   })
   console.log(table.toString())

tools/developer.html

@@ -268,6 +268,7 @@ <h3>Code</h3>
           <option>far.css</option>
           <option>felipec.css</option>
           <option>foundation.css</option>
+          <option>github-adaptive.css</option>
           <option>github-dark-dimmed.css</option>
           <option>github-dark.css</option>
           <option>github-gist.css</option>