Full document, spreadsheet, slideshow, and diagram tooling
1// Theme toggle button wiring. Requires a #theme-toggle element in the page.
2// Loaded as <script src="/theme-toggle.js"> at the end of <body> (defer-equivalent
3// since the DOM is parsed by then). Only attached when the element exists, so
4// pages without a toggle (e.g. calendar) don't crash.
5(function () {
6 var toggle = document.getElementById('theme-toggle');
7 if (!toggle) return;
8
9 function getEffectiveTheme() {
10 var saved = localStorage.getItem('atmos-theme');
11 if (saved === 'dark' || saved === 'light') return saved;
12 return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
13 }
14
15 function updateIcon() {
16 var theme = getEffectiveTheme();
17 toggle.textContent = theme === 'dark' ? '\u263E' : '\u2600';
18 toggle.setAttribute('data-tooltip', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
19 }
20
21 toggle.addEventListener('click', function () {
22 var current = getEffectiveTheme();
23 var next = current === 'dark' ? 'light' : 'dark';
24 document.documentElement.setAttribute('data-theme', next);
25 localStorage.setItem('atmos-theme', next);
26 updateIcon();
27 });
28
29 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
30 if (!localStorage.getItem('atmos-theme')) updateIcon();
31 });
32
33 updateIcon();
34})();