Implement dark mode for syntax highlighted code blocks (#8680)

Instead of unconditionally importing the `github.css` theme, we use a custom theme that uses the `light-dark()` fn. This custom theme is a merging the `github.css` and `github-dark.css` files into one.
rust-lang · May 19, 2024 · 297badc · 297badc
1 parent 1b1c17a
commit 297badc
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 9 deletions.
diff --git a/app/components/text-content.module.css b/app/components/text-content.module.css
@@ -30,14 +30,6 @@
         border-radius: var(--space-3xs);
     }
 
-    :global(.hljs) {
-        color: unset;
-        background: unset;
-        display: unset;
-        overflow-x: unset;
-        padding: 0;
-    }
-
     p, li {
         code {
             background-color: light-dark(#f6f8fa, #383836);
@@ -92,4 +84,85 @@
             }
         }
     }
+
+    /*
+     * This is a combination of the `github.css` and `github-dark.css` themes,
+     * but merged together using the `light-dark` function.
+     *
+     * see https://github.com/highlightjs/highlight.js/blob/11.9.0/src/styles/github.css
+     * and https://github.com/highlightjs/highlight.js/blob/11.9.0/src/styles/github-dark.css
+     */
+    :global(.hljs-doctag),
+    :global(.hljs-keyword),
+    :global(.hljs-meta) :global(.hljs-keyword),
+    :global(.hljs-template-tag),
+    :global(.hljs-template-variable),
+    :global(.hljs-type),
+    :global(.hljs-variable.language_) {
+        color: light-dark(#d73a49, #ff7b72);
+    }
+    :global(.hljs-title),
+    :global(.hljs-title.class_),
+    :global(.hljs-title.class_.inherited__),
+    :global(.hljs-title.function_) {
+        color: light-dark(#6f42c1, #d2a8ff);
+    }
+    :global(.hljs-attr),
+    :global(.hljs-attribute),
+    :global(.hljs-literal),
+    :global(.hljs-meta),
+    :global(.hljs-number),
+    :global(.hljs-operator),
+    :global(.hljs-variable),
+    :global(.hljs-selector-attr),
+    :global(.hljs-selector-class),
+    :global(.hljs-selector-id) {
+        color: light-dark(#005cc5, #79c0ff);
+    }
+    :global(.hljs-regex)p,
+    :global(.hljs-strin)g,
+    :global(.hljs-meta) :global(.hljs-string) {
+        color: light-dark(#032f62, #a5d6ff);
+    }
+    :global(.hljs-built_in),
+    :global(.hljs-symbol) {
+        color: light-dark(#e36209, #ffa657);
+    }
+    :global(.hljs-comment),
+    :global(.hljs-code),
+    :global(.hljs-formula) {
+        color: light-dark(#6a737d, #8b949e);
+    }
+    :global(.hljs-name),
+    :global(.hljs-quote),
+    :global(.hljs-selector-tag),
+    :global(.hljs-selector-pseudo) {
+        color: light-dark(#22863a, #7ee787);
+    }
+    :global(.hljs-subst) {
+        color: light-dark(#24292e, #c9d1d9);
+    }
+    :global(.hljs-section) {
+        color: light-dark(#005cc5, #1f6feb);
+        font-weight: bold
+    }
+    :global(.hljs-bullet) {
+        color: light-dark(#735c0f, #f2cc60);
+    }
+    :global(.hljs-emphasis) {
+        color: light-dark(#24292e, #c9d1d9);
+        font-style: italic
+    }
+    :global(.hljs-strong) {
+        color: light-dark(#24292e, #c9d1d9);
+        font-weight: bold
+    }
+    :global(.hljs-addition) {
+        color: light-dark(#22863a, #aff5b4);
+        background-color: light-dark(#f0fff4, #033a16);
+    }
+    :global(.hljs-deletion) {
+        color: light-dark(#b31d28, #ffdcd7);
+        background-color: light-dark(#ffeef0, #67060c);
+    }
 }
diff --git a/app/modifiers/highlight-syntax.js b/app/modifiers/highlight-syntax.js
@@ -1,6 +1,5 @@
 import { modifier } from 'ember-modifier';
 import hljs from 'highlight.js/lib/core';
-import 'highlight.js/styles/github.css';
 import bash from 'highlight.js/lib/languages/bash';
 import c from 'highlight.js/lib/languages/c';
 import cpp from 'highlight.js/lib/languages/cpp';