diff options
Diffstat (limited to '_posts')
| -rw-r--r-- | _posts/2026-10-17-regex.html | 55 |
1 files changed, 44 insertions, 11 deletions
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(); }) |