refactor: Improve code highlighting (#188)

* refactor: Do not rely on JavaScript for code highlighting, make dark and light themes consistent

* fix: Image brightness reduction in dark mode should work with implicitly selected theme (regression from #169)

* chore: Rename dark-theme style file into them-switcher and removed unused code

* chore: Update resources folder

BREAKING CHANGE: Highlighting customization now works by overriding CSS variables, no longer by overriding theme-specific files

assets/js/dark-mode.js

@@ -65,14 +65,6 @@ function changeMode() {
     const themeColor = isDark ? '{{ .Site.Params.themeColorDark }}': '{{ .Site.Params.themeColor }}';
     document.querySelector('meta[name="theme-color"]').setAttribute('content', themeColor);
 
-    // Change Chroma Code Highlight Theme
-    const oldChromaTheme = isDark ? 'chroma' : 'chroma-dark';
-    const newChromaTheme = isDark ? 'chroma-dark' : 'chroma';
-
-    [].slice.apply(document.getElementsByClassName(oldChromaTheme)).forEach((e) => {
-        e.className = newChromaTheme;
-    });
-
     {{ if and .Site.Params.enableUtterances (eq hugo.Environment "production") }}
         // Change Utterances Comments Theme
         // https://github.com/utterance/utterances/issues/229

assets/scss/components/_highlight.scss

@@ -24,7 +24,7 @@ span.lnt {
     text-align: right;
 }
 
-.chroma, .chroma-dark {
+.chroma {
     color: var(--color-contrast-high);
     background-color: alpha(var(--color-contrast-lower), 0.5);
 }
@@ -34,3 +34,66 @@ span.lnt {
         max-height: $maxHeight;
     }
 }
+
+/* The following is the output of `hugo gen chromastyles --style=dracula` */
+/* with color values replaced by variables. */
+
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: var(--chroma-line-numbers-background) }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--chroma-line-numbers-color) }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--chroma-line-numbers-color) }
+/* Keyword */ .chroma .k { color: var(--chroma-keyword-color) }
+/* KeywordConstant */ .chroma .kc { color: var(--chroma-keyword-color) }
+/* KeywordDeclaration */ .chroma .kd { color: var(--chroma-declaration-color); font-style: italic }
+/* KeywordNamespace */ .chroma .kn { color: var(--chroma-name-color) }
+/* KeywordPseudo */ .chroma .kp { color: var(--chroma-keyword-color) }
+/* KeywordReserved */ .chroma .kr { color: var(--chroma-keyword-color) }
+/* KeywordType */ .chroma .kt { color: var(--chroma-name-color) }
+/* NameAttribute */ .chroma .na { color: var(--chroma-attribute-color) }
+/* NameBuiltin */ .chroma .nb { color: var(--chroma-name-color); font-style: italic }
+/* NameClass */ .chroma .nc { color: var(--chroma-attribute-color) }
+/* NameFunction */ .chroma .nf { color: var(--chroma-attribute-color) }
+/* NameLabel */ .chroma .nl { color: var(--chroma-name-color); font-style: italic }
+/* NameTag */ .chroma .nt { color: var(--chroma-keyword-color) }
+/* NameVariable */ .chroma .nv { color: var(--chroma-name-color); font-style: italic }
+/* NameVariableClass */ .chroma .vc { color: var(--chroma-name-color); font-style: italic }
+/* NameVariableGlobal */ .chroma .vg { color: var(--chroma-name-color); font-style: italic }
+/* NameVariableInstance */ .chroma .vi { color: var(--chroma-name-color); font-style: italic }
+/* LiteralString */ .chroma .s { color: var(--chroma-literal-color) }
+/* LiteralStringAffix */ .chroma .sa { color: var(--chroma-literal-color) }
+/* LiteralStringBacktick */ .chroma .sb { color: var(--chroma-literal-color) }
+/* LiteralStringChar */ .chroma .sc { color: var(--chroma-literal-color) }
+/* LiteralStringDelimiter */ .chroma .dl { color: var(--chroma-literal-color) }
+/* LiteralStringDoc */ .chroma .sd { color: var(--chroma-literal-color) }
+/* LiteralStringDouble */ .chroma .s2 { color: var(--chroma-literal-color) }
+/* LiteralStringEscape */ .chroma .se { color: var(--chroma-literal-color) }
+/* LiteralStringHeredoc */ .chroma .sh { color: var(--chroma-literal-color) }
+/* LiteralStringInterpol */ .chroma .si { color: var(--chroma-literal-color) }
+/* LiteralStringOther */ .chroma .sx { color: var(--chroma-literal-color) }
+/* LiteralStringRegex */ .chroma .sr { color: var(--chroma-literal-color) }
+/* LiteralStringSingle */ .chroma .s1 { color: var(--chroma-literal-color) }
+/* LiteralStringSymbol */ .chroma .ss { color: var(--chroma-literal-color) }
+/* LiteralNumber */ .chroma .m { color: var(--chroma-number-color) }
+/* LiteralNumberBin */ .chroma .mb { color: var(--chroma-number-color) }
+/* LiteralNumberFloat */ .chroma .mf { color: var(--chroma-number-color) }
+/* LiteralNumberHex */ .chroma .mh { color: var(--chroma-number-color) }
+/* LiteralNumberInteger */ .chroma .mi { color: var(--chroma-number-color) }
+/* LiteralNumberIntegerLong */ .chroma .il { color: var(--chroma-number-color) }
+/* LiteralNumberOct */ .chroma .mo { color: var(--chroma-number-color) }
+/* Operator */ .chroma .o { color: var(--chroma-keyword-color) }
+/* OperatorWord */ .chroma .ow { color: var(--chroma-keyword-color) }
+/* Comment */ .chroma .c { color: var(--chroma-comment-color) }
+/* CommentHashbang */ .chroma .ch { color: var(--chroma-comment-color) }
+/* CommentMultiline */ .chroma .cm { color: var(--chroma-comment-color) }
+/* CommentSingle */ .chroma .c1 { color: var(--chroma-comment-color) }
+/* CommentSpecial */ .chroma .cs { color: var(--chroma-comment-color) }
+/* CommentPreproc */ .chroma .cp { color: var(--chroma-keyword-color) }
+/* CommentPreprocFile */ .chroma .cpf { color: var(--chroma-keyword-color) }
+/* GenericDeleted */ .chroma .gd { color: var(--chroma-deleted-color) }
+/* GenericEmph */ .chroma .ge { text-decoration: underline }
+/* GenericHeading */ .chroma .gh { font-weight: bold }
+/* GenericInserted */ .chroma .gi { font-weight: bold }
+/* GenericOutput */ .chroma .go { color: var(--chroma-output-color) }
+/* GenericSubheading */ .chroma .gu { font-weight: bold }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }

assets/scss/components/_dark-mode.scss → assets/scss/components/_theme-switcher.scss

@@ -12,12 +12,6 @@
     }
 }
 
-[data-theme="dark"] {
-    img {
-        filter: brightness(50%);
-    }
-}
-
 @if (not $headerLayoutFlex) {
     #theme-switcher {
         padding: 1em;

assets/scss/main.scss

@@ -162,6 +162,12 @@
     $defaultTheme: light;
 {{ end }}
 
+{{ if .Site.Params.enableHighlight }}
+    $enableHighlight: true;
+{{ else }}
+    $enableHighlight: false;
+{{ end }}
+
 @import "themes/light";
 
 // Dark Mode
@@ -183,11 +189,7 @@
     {{ end }}
 
     @import "themes/dark";
-    @import "components/dark-mode";
-
-    {{ if .Site.Params.enableHighlight }}
-        @import "themes/highlight/dark";
-    {{ end }}
+    @import "components/theme-switcher";
 {{ end }}
 
 
@@ -343,7 +345,6 @@
 {{ end }}
 
 {{ if .Site.Params.enableHighlight }}
-    @import "themes/highlight/light";
     @import "components/highlight";
 {{ end }}
 

assets/scss/themes/_dark.scss

@@ -16,6 +16,25 @@
     .theme-icon-dark {
         display: inline-block;
     }
+    img {
+        filter: brightness(50%);
+    }
+
+    @if ($enableHighlight) {
+        /* https://xyproto.github.io/splash/docs/all.html */
+        /* Color values matching dracula style */
+
+        --chroma-line-numbers-background: #ffffcc;
+        --chroma-line-numbers-color: #7f7f7f;
+        --chroma-keyword-color: #ff79c6;
+        --chroma-name-color: #8be9fd;
+        --chroma-attribute-color: #50fa7b;
+        --chroma-literal-color: #f1fa8c;
+        --chroma-number-color: #bd93f9;
+        --chroma-comment-color: #6272a4;
+        --chroma-deleted-color: #8b080b;
+        --chroma-output-color: #44475a;
+    }
 }
 
 @media (prefers-color-scheme: dark) {

assets/scss/themes/_light.scss

@@ -15,11 +15,25 @@
     .theme-icon-dark {
         display: none;
     }
+    @if ($enableHighlight) {
+        /* https://xyproto.github.io/splash/docs/all.html */
+        /* Color values matching manni style */
+
+        --chroma-line-numbers-background: #ffffcc;
+        --chroma-line-numbers-color: #7f7f7f;
+        --chroma-keyword-color: #006699;
+        --chroma-name-color: #9999ff;
+        --chroma-attribute-color: #330099;
+        --chroma-literal-color: #cc3300;
+        --chroma-number-color: #ff6600;
+        --chroma-comment-color: #0099ff;
+        --chroma-deleted-color: #ffcccc;
+        --chroma-output-color: #aaaaaa;
+    }
 }
 
 @media (prefers-color-scheme: light) {
-    :root:not([data-theme])
-    {
+    :root:not([data-theme]) {
         @include light-theme;
     }
 }