FossilRepo
| afe42d0… | ragelink | 1 | 'use strict'; |
| afe42d0… | ragelink | 2 | { |
| afe42d0… | ragelink | 3 | function setTheme(mode) { |
| afe42d0… | ragelink | 4 | if (mode !== "light" && mode !== "dark" && mode !== "auto") { |
| afe42d0… | ragelink | 5 | console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`); |
| afe42d0… | ragelink | 6 | mode = "auto"; |
| afe42d0… | ragelink | 7 | } |
| afe42d0… | ragelink | 8 | document.documentElement.dataset.theme = mode; |
| afe42d0… | ragelink | 9 | localStorage.setItem("theme", mode); |
| afe42d0… | ragelink | 10 | } |
| afe42d0… | ragelink | 11 | |
| afe42d0… | ragelink | 12 | function cycleTheme() { |
| afe42d0… | ragelink | 13 | const currentTheme = localStorage.getItem("theme") || "auto"; |
| afe42d0… | ragelink | 14 | const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; |
| afe42d0… | ragelink | 15 | |
| afe42d0… | ragelink | 16 | if (prefersDark) { |
| afe42d0… | ragelink | 17 | // Auto (dark) -> Light -> Dark |
| afe42d0… | ragelink | 18 | if (currentTheme === "auto") { |
| afe42d0… | ragelink | 19 | setTheme("light"); |
| afe42d0… | ragelink | 20 | } else if (currentTheme === "light") { |
| afe42d0… | ragelink | 21 | setTheme("dark"); |
| afe42d0… | ragelink | 22 | } else { |
| afe42d0… | ragelink | 23 | setTheme("auto"); |
| afe42d0… | ragelink | 24 | } |
| afe42d0… | ragelink | 25 | } else { |
| afe42d0… | ragelink | 26 | // Auto (light) -> Dark -> Light |
| afe42d0… | ragelink | 27 | if (currentTheme === "auto") { |
| afe42d0… | ragelink | 28 | setTheme("dark"); |
| afe42d0… | ragelink | 29 | } else if (currentTheme === "dark") { |
| afe42d0… | ragelink | 30 | setTheme("light"); |
| afe42d0… | ragelink | 31 | } else { |
| afe42d0… | ragelink | 32 | setTheme("auto"); |
| afe42d0… | ragelink | 33 | } |
| afe42d0… | ragelink | 34 | } |
| afe42d0… | ragelink | 35 | } |
| afe42d0… | ragelink | 36 | |
| afe42d0… | ragelink | 37 | function initTheme() { |
| afe42d0… | ragelink | 38 | // set theme defined in localStorage if there is one, or fallback to auto mode |
| afe42d0… | ragelink | 39 | const currentTheme = localStorage.getItem("theme"); |
| afe42d0… | ragelink | 40 | currentTheme ? setTheme(currentTheme) : setTheme("auto"); |
| afe42d0… | ragelink | 41 | } |
| afe42d0… | ragelink | 42 | |
| afe42d0… | ragelink | 43 | window.addEventListener('load', function(_) { |
| afe42d0… | ragelink | 44 | const buttons = document.getElementsByClassName("theme-toggle"); |
| afe42d0… | ragelink | 45 | Array.from(buttons).forEach((btn) => { |
| afe42d0… | ragelink | 46 | btn.addEventListener("click", cycleTheme); |
| afe42d0… | ragelink | 47 | }); |
| afe42d0… | ragelink | 48 | }); |
| afe42d0… | ragelink | 49 | |
| afe42d0… | ragelink | 50 | initTheme(); |
| afe42d0… | ragelink | 51 | } |