From d1c042922bcc00dfdfcb45e7216a17c89511779d Mon Sep 17 00:00:00 2001 From: flop Date: Tue, 19 May 2026 11:20:54 +0200 Subject: [PATCH] feat(theme): switch between light and dark --- ts/index.html | 300 +++++++++++++++++++++++++++++++++++++------------- 1 file changed, 222 insertions(+), 78 deletions(-) diff --git a/ts/index.html b/ts/index.html index 69c5157..00d4559 100644 --- a/ts/index.html +++ b/ts/index.html @@ -5,7 +5,121 @@ MonoDisplay Editor + @@ -551,6 +665,9 @@ Add section untitled +
+
+
@@ -1032,6 +1149,33 @@ a.click(); markClean(); } + // ─── Theme ──────────────────────────────────────────────────────────────────── + var _THEMES = ['dark', 'light', 'auto']; + function _getTheme() { return document.documentElement.getAttribute('data-theme') || 'auto'; } + function _applyTheme(t) { + if (t === 'auto') { document.documentElement.removeAttribute('data-theme'); localStorage.removeItem('theme'); } + else { document.documentElement.setAttribute('data-theme', t); localStorage.setItem('theme', t); } + _updateThemeBtn(); + } + function cycleTheme() { + var cur = _getTheme(), idx = _THEMES.indexOf(cur); + _applyTheme(_THEMES[(idx + 1) % _THEMES.length]); + } + function _detectDR() { + return !!(document.querySelector('meta[name="darkreader"]') || + document.querySelector('style[data-darkreader-style]') || + document.documentElement.getAttribute('data-darkreader-mode')); + } + function _updateThemeBtn() { + var btn = document.getElementById('theme-toggle'); + if (!btn) return; + var t = _getTheme(), dr = _detectDR(); + var lbl = { dark: '☾ dark', light: '☀ light', auto: '⊙ auto' }; + btn.textContent = (dr ? 'DR · ' : '') + (lbl[t] || lbl.auto); + btn.title = dr ? 'DarkReader active — controlling theme' : ('Theme: ' + t + ' (click to cycle)'); + } + window.addEventListener('DOMContentLoaded', _updateThemeBtn); + // ─── Init ───────────────────────────────────────────────────────────────────── render(); if (window.MonoDisplay) { initDemos(); } @@ -1039,4 +1183,4 @@ - \ No newline at end of file +