diff options
| author | Liam Mitchell <[email protected]> | 2026-03-09 19:06:36 -0700 |
|---|---|---|
| committer | Liam Mitchell <[email protected]> | 2026-03-09 19:06:36 -0700 |
| commit | d1abc50ee9d4fb72efc646e17decafea741caa34 (patch) | |
| tree | e4288e00f2f7ca0391b83d986efcb69d3ba66a83 /src/zenserver/frontend/html/theme.js | |
| parent | Allow requests with invalid content-types unless specified in command line or... (diff) | |
| parent | updated chunk–block analyser (#818) (diff) | |
| download | zen-d1abc50ee9d4fb72efc646e17decafea741caa34.tar.xz zen-d1abc50ee9d4fb72efc646e17decafea741caa34.zip | |
Merge branch 'main' into lm/restrict-content-type
Diffstat (limited to 'src/zenserver/frontend/html/theme.js')
| -rw-r--r-- | src/zenserver/frontend/html/theme.js | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/src/zenserver/frontend/html/theme.js b/src/zenserver/frontend/html/theme.js new file mode 100644 index 000000000..52ca116ab --- /dev/null +++ b/src/zenserver/frontend/html/theme.js @@ -0,0 +1,116 @@ +// Copyright Epic Games, Inc. All Rights Reserved. + +// Theme toggle: cycles system → light → dark → system. +// Persists choice in localStorage. Applies data-theme attribute on <html>. + +(function() { + var KEY = 'zen-theme'; + + function getStored() { + try { return localStorage.getItem(KEY); } catch (e) { return null; } + } + + function setStored(value) { + try { + if (value) localStorage.setItem(KEY, value); + else localStorage.removeItem(KEY); + } catch (e) {} + } + + function apply(theme) { + if (theme) + document.documentElement.setAttribute('data-theme', theme); + else + document.documentElement.removeAttribute('data-theme'); + } + + function getEffective(stored) { + if (stored) return stored; + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } + + // Apply stored preference immediately (before paint) + var stored = getStored(); + apply(stored); + + // Create toggle button once DOM is ready + function createToggle() { + var btn = document.createElement('button'); + btn.id = 'zen_theme_toggle'; + btn.title = 'Toggle theme'; + + function updateIcon() { + var effective = getEffective(getStored()); + // Show sun in dark mode (click to go light), moon in light mode (click to go dark) + btn.textContent = effective === 'dark' ? '\u2600' : '\u263E'; + + var isManual = getStored() != null; + btn.title = isManual + ? 'Theme: ' + effective + ' (click to change, double-click for system)' + : 'Theme: system (click to change)'; + } + + btn.addEventListener('click', function() { + var current = getStored(); + var effective = getEffective(current); + // Toggle to the opposite + var next = effective === 'dark' ? 'light' : 'dark'; + setStored(next); + apply(next); + updateIcon(); + }); + + btn.addEventListener('dblclick', function(e) { + e.preventDefault(); + // Reset to system preference + setStored(null); + apply(null); + updateIcon(); + }); + + // Update icon when system preference changes + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() { + if (!getStored()) updateIcon(); + }); + + updateIcon(); + document.body.appendChild(btn); + + // WebSocket pause/play toggle + var WS_KEY = 'zen-ws-paused'; + var wsBtn = document.createElement('button'); + wsBtn.id = 'zen_ws_toggle'; + + var initialPaused = false; + try { initialPaused = localStorage.getItem(WS_KEY) === 'true'; } catch (e) {} + + function updateWsIcon(paused) { + wsBtn.dataset.paused = paused ? 'true' : 'false'; + wsBtn.textContent = paused ? '\u25B6' : '\u23F8'; + wsBtn.title = paused ? 'Resume live updates' : 'Pause live updates'; + } + + updateWsIcon(initialPaused); + + // Fire initial event so pages pick up persisted state + document.addEventListener('DOMContentLoaded', function() { + if (initialPaused) { + document.dispatchEvent(new CustomEvent('zen-ws-toggle', { detail: { paused: true } })); + } + }); + + wsBtn.addEventListener('click', function() { + var paused = wsBtn.dataset.paused !== 'true'; + try { localStorage.setItem(WS_KEY, paused ? 'true' : 'false'); } catch (e) {} + updateWsIcon(paused); + document.dispatchEvent(new CustomEvent('zen-ws-toggle', { detail: { paused: paused } })); + }); + + document.body.appendChild(wsBtn); + } + + if (document.readyState === 'loading') + document.addEventListener('DOMContentLoaded', createToggle); + else + createToggle(); +})(); |