rickub
nandi/gleanpublic⑂ Fork 0
⑂ 44e8f82
Branches
claude/modal-container-min-76527a main View all branches → View all tags →
Commits
⬇ Clone ▾
git clone https://git.rickub.com/nandi/glean.git
git clone ssh://git@rickub.com/nandi/glean.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

Simplify system theme toggleUnverified

Julien Robert committed 2026-05-15T12:23:22+02:00 Browse files
44e8f82 parent: 0d1d237
modified internal/tmpl/base.html +6 -19
@@ -6,7 +6,7 @@
66 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
77 <title>Glean</title>
88 <script>
9- (function(){var p=localStorage.getItem('theme')||'system';var r=p==='system'?(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'):p;document.documentElement.setAttribute('data-theme',r)})();
9+ (function(){var p=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',p)})();
1010 </script>
1111 <link rel="stylesheet" href="/static/output.css">
1212 <script src="/static/htmx.min.js"></script>
@@ -195,10 +195,8 @@
195195 <button onclick="toggleTheme()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left">
196196 <svg class="w-3.5 h-3.5 shrink-0 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
197197 <svg class="w-3.5 h-3.5 shrink-0 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
198- <svg class="w-3.5 h-3.5 shrink-0 theme-icon-system hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z"/></svg>
199198 <span class="theme-text-dark">Dark</span>
200199 <span class="theme-text-light hidden">Light</span>
201- <span class="theme-text-system hidden">System</span>
202200 </button>
203201 <button onclick="document.getElementById('shortcuts-dialog').showModal()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left">
204202 <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
@@ -231,10 +229,8 @@
231229 <button onclick="toggleTheme()" class="text-xs text-spot-secondary hover:text-spot-text inline-flex gap-1.5 items-center transition">
232230 <svg class="w-3.5 h-3.5 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
233231 <svg class="w-3.5 h-3.5 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
234- <svg class="w-3.5 h-3.5 theme-icon-system hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z"/></svg>
235232 <span class="theme-text-dark">Dark</span>
236233 <span class="theme-text-light hidden">Light</span>
237- <span class="theme-text-system hidden">System</span>
238234 </button>
239235 </div>
240236 <div class="border-t border-spot-divider mt-4 pt-3">
@@ -248,17 +244,12 @@
248244 </main>
249245
250246 <script>
251- var themePref = localStorage.getItem('theme') || 'system';
252- var modes = ['dark', 'light', 'system'];
253-
254- function resolveTheme(pref) {
255- return pref === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : pref;
256- }
247+ var themePref = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
257248
258249 function applyTheme() {
259- document.documentElement.setAttribute('data-theme', resolveTheme(themePref));
260- var next = modes[(modes.indexOf(themePref) + 1) % 3];
261- modes.forEach(function(m) {
250+ document.documentElement.setAttribute('data-theme', themePref);
251+ var next = themePref === 'dark' ? 'light' : 'dark';
252+ ['dark', 'light'].forEach(function(m) {
262253 var show = m === next;
263254 document.querySelectorAll('.theme-icon-' + m + ', .theme-text-' + m).forEach(function(el) {
264255 el.classList.toggle('hidden', !show);
@@ -267,15 +258,11 @@
267258 }
268259
269260 function toggleTheme() {
270- themePref = modes[(modes.indexOf(themePref) + 1) % 3];
261+ themePref = themePref === 'dark' ? 'light' : 'dark';
271262 localStorage.setItem('theme', themePref);
272263 applyTheme();
273264 }
274265
275- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
276- if (themePref === 'system') applyTheme();
277- });
278-
279266 applyTheme();
280267
281268 window.addEventListener('pageshow', function(e) {
@@ -6,7 +6,7 @@
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7 <title>Glean</title>7 <title>Glean</title>
8 <script>8 <script>
9- (function(){var p=localStorage.getItem('theme')||'system';var r=p==='system'?(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'):p;document.documentElement.setAttribute('data-theme',r)})();9+ (function(){var p=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',p)})();
10 </script>10 </script>
11 <link rel="stylesheet" href="/static/output.css">11 <link rel="stylesheet" href="/static/output.css">
12 <script src="/static/htmx.min.js"></script>12 <script src="/static/htmx.min.js"></script>
@@ -195,10 +195,8 @@
195 <button onclick="toggleTheme()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left">195 <button onclick="toggleTheme()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left">
196 <svg class="w-3.5 h-3.5 shrink-0 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>196 <svg class="w-3.5 h-3.5 shrink-0 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
197 <svg class="w-3.5 h-3.5 shrink-0 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>197 <svg class="w-3.5 h-3.5 shrink-0 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
198- <svg class="w-3.5 h-3.5 shrink-0 theme-icon-system hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z"/></svg>
199 <span class="theme-text-dark">Dark</span>198 <span class="theme-text-dark">Dark</span>
200 <span class="theme-text-light hidden">Light</span>199 <span class="theme-text-light hidden">Light</span>
201- <span class="theme-text-system hidden">System</span>
202 </button>200 </button>
203 <button onclick="document.getElementById('shortcuts-dialog').showModal()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left">201 <button onclick="document.getElementById('shortcuts-dialog').showModal()" class="text-xs text-spot-secondary hover:text-spot-text hover:underline inline-flex gap-1.5 items-center transition text-left">
204 <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>202 <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
@@ -231,10 +229,8 @@
231 <button onclick="toggleTheme()" class="text-xs text-spot-secondary hover:text-spot-text inline-flex gap-1.5 items-center transition">229 <button onclick="toggleTheme()" class="text-xs text-spot-secondary hover:text-spot-text inline-flex gap-1.5 items-center transition">
232 <svg class="w-3.5 h-3.5 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>230 <svg class="w-3.5 h-3.5 theme-icon-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
233 <svg class="w-3.5 h-3.5 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>231 <svg class="w-3.5 h-3.5 theme-icon-light hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
234- <svg class="w-3.5 h-3.5 theme-icon-system hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z"/></svg>
235 <span class="theme-text-dark">Dark</span>232 <span class="theme-text-dark">Dark</span>
236 <span class="theme-text-light hidden">Light</span>233 <span class="theme-text-light hidden">Light</span>
237- <span class="theme-text-system hidden">System</span>
238 </button>234 </button>
239 </div>235 </div>
240 <div class="border-t border-spot-divider mt-4 pt-3">236 <div class="border-t border-spot-divider mt-4 pt-3">
@@ -248,17 +244,12 @@
248 </main>244 </main>
249 245
250 <script>246 <script>
251- var themePref = localStorage.getItem('theme') || 'system';247+ var themePref = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
252- var modes = ['dark', 'light', 'system'];
253-
254- function resolveTheme(pref) {
255- return pref === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : pref;
256- }
257 248
258 function applyTheme() {249 function applyTheme() {
259- document.documentElement.setAttribute('data-theme', resolveTheme(themePref));250+ document.documentElement.setAttribute('data-theme', themePref);
260- var next = modes[(modes.indexOf(themePref) + 1) % 3];251+ var next = themePref === 'dark' ? 'light' : 'dark';
261- modes.forEach(function(m) {252+ ['dark', 'light'].forEach(function(m) {
262 var show = m === next;253 var show = m === next;
263 document.querySelectorAll('.theme-icon-' + m + ', .theme-text-' + m).forEach(function(el) {254 document.querySelectorAll('.theme-icon-' + m + ', .theme-text-' + m).forEach(function(el) {
264 el.classList.toggle('hidden', !show);255 el.classList.toggle('hidden', !show);
@@ -267,15 +258,11 @@
267 }258 }
268 259
269 function toggleTheme() {260 function toggleTheme() {
270- themePref = modes[(modes.indexOf(themePref) + 1) % 3];261+ themePref = themePref === 'dark' ? 'light' : 'dark';
271 localStorage.setItem('theme', themePref);262 localStorage.setItem('theme', themePref);
272 applyTheme();263 applyTheme();
273 }264 }
274 265
275- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
276- if (themePref === 'system') applyTheme();
277- });
278-
279 applyTheme();266 applyTheme();
280 267
281 window.addEventListener('pageshow', function(e) {268 window.addEventListener('pageshow', function(e) {
modified static/input.css +21 -0
@@ -4,6 +4,27 @@
44
55 @layer base {
66 :root {
7+ color-scheme: light dark;
8+ --spot-bg: #f2f0eb;
9+ --spot-surface: #ffffff;
10+ --spot-hover: #edebe9;
11+ --spot-hover-50: rgba(237,235,233,0.5);
12+ --spot-text: rgba(0,0,0,0.87);
13+ --spot-secondary: rgba(0,0,0,0.58);
14+ --spot-body: rgba(0,0,0,0.70);
15+ --spot-muted: rgba(0,0,0,0.25);
16+ --spot-divider: rgba(0,0,0,0.08);
17+ --spot-divider-30: rgba(0,0,0,0.12);
18+ --spot-outline: rgba(0,0,0,0.15);
19+ --spot-placeholder: rgba(0,0,0,0.30);
20+ --spot-active-bg: #1E3932;
21+ --spot-active-text: #ffffff;
22+ --spot-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
23+ --spot-shadow-heavy: 0 4px 12px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.06);
24+ --spot-shadow-elevated: 0 8px 24px rgba(0,0,0,0.10), 0 24px 48px rgba(0,0,0,0.08);
25+ }
26+
27+ [data-theme="dark"] {
728 color-scheme: dark;
829 --spot-bg: #0a1814;
930 --spot-surface: #152b24;
@@ -4,6 +4,27 @@
4 4
5 @layer base {5 @layer base {
6 :root {6 :root {
7+ color-scheme: light dark;
8+ --spot-bg: #f2f0eb;
9+ --spot-surface: #ffffff;
10+ --spot-hover: #edebe9;
11+ --spot-hover-50: rgba(237,235,233,0.5);
12+ --spot-text: rgba(0,0,0,0.87);
13+ --spot-secondary: rgba(0,0,0,0.58);
14+ --spot-body: rgba(0,0,0,0.70);
15+ --spot-muted: rgba(0,0,0,0.25);
16+ --spot-divider: rgba(0,0,0,0.08);
17+ --spot-divider-30: rgba(0,0,0,0.12);
18+ --spot-outline: rgba(0,0,0,0.15);
19+ --spot-placeholder: rgba(0,0,0,0.30);
20+ --spot-active-bg: #1E3932;
21+ --spot-active-text: #ffffff;
22+ --spot-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
23+ --spot-shadow-heavy: 0 4px 12px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.06);
24+ --spot-shadow-elevated: 0 8px 24px rgba(0,0,0,0.10), 0 24px 48px rgba(0,0,0,0.08);
25+ }
26+
27+ [data-theme="dark"] {
7 color-scheme: dark;28 color-scheme: dark;
8 --spot-bg: #0a1814;29 --spot-bg: #0a1814;
9 --spot-surface: #152b24;30 --spot-surface: #152b24;