| 1 | // Theme toggle. Enhancement only — the site is fully usable in its default |
| 2 | // dark theme with this script blocked or absent; it just cannot be switched. |
| 3 | // |
| 4 | // The control reads out the theme it is currently *in* ("DARK"), not the one |
| 5 | // it would switch to. That is the design's choice, and it is the right one for |
| 6 | // a control that is also the only place the current theme is stated. |
| 7 | (function () { |
| 8 | var KEY = "dogfood-theme"; |
| 9 | |
| 10 | function current() { |
| 11 | return document.documentElement.getAttribute("data-theme") === "light" |
| 12 | ? "light" |
| 13 | : "dark"; |
| 14 | } |
| 15 | |
| 16 | function apply(theme) { |
| 17 | if (theme === "light") { |
| 18 | document.documentElement.setAttribute("data-theme", "light"); |
| 19 | } else { |
| 20 | document.documentElement.removeAttribute("data-theme"); |
| 21 | } |
| 22 | document.querySelectorAll("[data-theme-toggle]").forEach(function (btn) { |
| 23 | btn.setAttribute("aria-pressed", String(theme === "light")); |
| 24 | var label = btn.querySelector("[data-theme-label]"); |
| 25 | if (label) label.textContent = theme; |
| 26 | }); |
| 27 | } |
| 28 | |
| 29 | // Exposed so the palette's "Toggle theme" command drives this same code |
| 30 | // path rather than reimplementing persistence next to it. |
| 31 | window.dogfoodToggleTheme = function () { |
| 32 | var next = current() === "light" ? "dark" : "light"; |
| 33 | apply(next); |
| 34 | try { |
| 35 | localStorage.setItem(KEY, next); |
| 36 | } catch (e) { |
| 37 | // Storage blocked (private mode, quota). The toggle still works for |
| 38 | // this page load; it just will not persist across visits. |
| 39 | } |
| 40 | }; |
| 41 | |
| 42 | document.querySelectorAll("[data-theme-toggle]").forEach(function (btn) { |
| 43 | btn.hidden = false; |
| 44 | btn.addEventListener("click", window.dogfoodToggleTheme); |
| 45 | }); |
| 46 | |
| 47 | apply(current()); |
| 48 | })(); |
48 lines · JavaScript