From 976c0d950461ab884a9d107659d3ba103d8cb269 Mon Sep 17 00:00:00 2001
From: Hizbu Azka <hanifan.azka@gmail.com>
Date: Wed, 21 Oct 2026 14:31:59 +0700
Subject: selfhost cm, add dark theme

---
 _posts/2026-10-17-regex.html | 55 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 44 insertions(+), 11 deletions(-)

(limited to '_posts/2026-10-17-regex.html')

diff --git a/_posts/2026-10-17-regex.html b/_posts/2026-10-17-regex.html
index b7e3855..b03779a 100644
--- a/_posts/2026-10-17-regex.html
+++ b/_posts/2026-10-17-regex.html
@@ -31,11 +31,23 @@ layout: post
 
 <style>
   :root {
-      --bg-color: #ffffff;
       --border-color: #d0d7de;
-      --text-color: #24292f;
       --tab-bg: #f6f8fa;
       --tab-active-bg: #ffffff;
+      --editor-bg: #ffffff;
+      --rename-bg: #ffffff;
+      --rename-fg: #000000;
+  }
+
+  @media (prefers-color-scheme: dark) {
+      :root {
+          --border-color: #2f2821;
+          --tab-bg: #090705;
+          --tab-active-bg: #000000;
+          --editor-bg: #0d1117;
+          --rename-bg: #0d1117;
+          --rename-fg: #ffffff;
+      }
   }
 
   #loading {
@@ -105,7 +117,8 @@ layout: post
       padding: 0 2px;
       border: 1px solid #0969da;
       outline: none;
-      background: #fff;
+      background: var(--rename-bg);
+      color: var(--rename-fg);
   }
   .tab-btn.active {
       background: var(--tab-active-bg);
@@ -122,7 +135,7 @@ layout: post
       border-radius: 4px;
   }
   .tab-close:hover {
-      background: rgba(0, 0, 0, 0.1);
+      background: rgba(128, 128, 128, 0.25);
       color: var(--text-color);
   }
   .tab-add-btn {
@@ -141,7 +154,7 @@ layout: post
       margin-bottom: 1rem;
       border: 1px solid var(--border-color);
       overflow: hidden;
-      background: #ffffff;
+    background: var(--editor-bg);
   }
 
   #cm6-editor {
@@ -150,7 +163,7 @@ layout: post
       flex-direction: column;
       border: 1px solid var(--border-color);
       overflow: hidden;
-      background: #ffffff;
+      background: var(--editor-bg);
   }
 
   #regex-editor .cm-editor,
@@ -180,11 +193,20 @@ layout: post
 </div>
 <div id="cm6-editor"></div>
 
+{% include cm-importmap.html %}
+
 <script type="module">
-  import { EditorState, StateField, StateEffect, RangeSetBuilder } from 'https://esm.sh/@codemirror/state@6.7.6';
-  import { EditorView, Decoration, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, highlightActiveLine } from 'https://esm.sh/@codemirror/view@6.43.14';
-  import { defaultKeymap, history, historyKeymap } from 'https://esm.sh/@codemirror/commands@6.11.1';
-  import { syntaxHighlighting, defaultHighlightStyle, bracketMatching } from 'https://esm.sh/@codemirror/language@6.13.1';
+  import { EditorState, StateField, StateEffect, RangeSetBuilder, Compartment } from '@codemirror/state';
+  import { EditorView, Decoration, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, highlightActiveLine } from '@codemirror/view';
+  import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+  import { syntaxHighlighting, defaultHighlightStyle, bracketMatching } from '@codemirror/language';
+  import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
+
+  const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  const themeFor = dark => dark ? githubDark : githubLight;
+
+  const regexTheme = new Compartment();
+  const mainTheme  = new Compartment();
 
   // Top Editor Line Fringe Decorations
   const topEditorLineDecos = [
@@ -265,6 +287,7 @@ layout: post
     lineNumbers(),
     drawSelection(),
     keymap.of(defaultKeymap),
+	      regexTheme.of(themeFor(darkQuery.matches)),
     topEditorField,
     EditorView.updateListener.of(update => {
     if (update.docChanged) {
@@ -334,9 +357,18 @@ layout: post
     input.addEventListener('click', e => e.stopPropagation());   // don't trigger switchTab
     }
 
+  function applyTheme() {
+      const t = themeFor(darkQuery.matches);
+      regexView.dispatch({ effects: regexTheme.reconfigure(t) });
+      mainView.dispatch({ effects: mainTheme.reconfigure(t) });
+  }
+
+  darkQuery.addEventListener('change', applyTheme);
+
     function loadActive() {
     renderTabs();
     mainView.setState(states[activeTabIndex]);
+      applyTheme();
     dispatchRegexUpdate();   // a stashed state may hold stale regex queries
     saveToStorage();         // must run after setState so it saves the new tab's text
     }
@@ -447,7 +479,8 @@ layout: post
       drawSelection(),
       highlightActiveLine(),
       bracketMatching(),
-      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      mainTheme.of(themeFor(darkQuery.matches)),
+      // syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
       keymap.of([...defaultKeymap, ...historyKeymap]),
       regexHighlightField,
       EditorView.updateListener.of(u => { if (u.docChanged) saveToStorage(); })
-- 
cgit