|
| 1 | +var _a; |
| 2 | +var themeQuery = window.matchMedia('(prefers-color-scheme: dark)'); |
| 3 | +var localStorageKey = "picked-theme"; |
| 4 | +var autoTheme = false; |
| 5 | +// load initial theme before load event to prevent flashing of background color on navigation |
| 6 | +var initialTheme = (_a = window.localStorage.getItem(localStorageKey)) !== null && _a !== void 0 ? _a : "auto"; |
| 7 | +setPickedTheme(initialTheme); |
| 8 | +window.addEventListener("load", function () { |
| 9 | + var _a; |
| 10 | + var themeSwitcher = window.document.getElementById("theme-switcher"); |
| 11 | + themeSwitcher.addEventListener("change", function (themePickedEvent) { |
| 12 | + var newValue = themePickedEvent.target.value; |
| 13 | + setPickedTheme(newValue); |
| 14 | + }); |
| 15 | + (_a = themeQuery.addEventListener) === null || _a === void 0 ? void 0 : _a.call(themeQuery, "change", function (systemThemeChangeEvent) { |
| 16 | + var systemTheme = systemThemeChangeEvent.matches ? "dark" : "light"; |
| 17 | + updateDropdownLabel(systemTheme); |
| 18 | + if (autoTheme) { |
| 19 | + applyTheme(systemTheme); |
| 20 | + } |
| 21 | + }); |
| 22 | + setInitialTheme(themeSwitcher); |
| 23 | + checkThemingSupport(); |
| 24 | +}); |
| 25 | +/** |
| 26 | + * Sets the correct theme based on what's in storage, and updates the theme switcher dropdown with the correct initial value. |
| 27 | + */ |
| 28 | +function setInitialTheme(themeSwitcher) { |
| 29 | + var _a; |
| 30 | + var initialTheme = (_a = window.localStorage.getItem(localStorageKey)) !== null && _a !== void 0 ? _a : "auto"; |
| 31 | + themeSwitcher.value = initialTheme; |
| 32 | + setPickedTheme(initialTheme); |
| 33 | + var systemTheme = themeQuery.matches ? "dark" : "light"; |
| 34 | + updateDropdownLabel(systemTheme); |
| 35 | +} |
| 36 | +/** |
| 37 | + * Updates the styles of the page to reflect a new theme |
| 38 | + */ |
| 39 | +function applyTheme(newTheme) { |
| 40 | + var otherTheme = newTheme == "light" ? "dark" : "light"; |
| 41 | + window.document.documentElement.classList.remove(otherTheme + "-theme"); |
| 42 | + window.document.documentElement.classList.add(newTheme + "-theme"); |
| 43 | +} |
| 44 | +/** |
| 45 | + * Saves a newly picked theme to storage and applies the theme. |
| 46 | + * If the new theme is "auto", the correct theme will be applied based on the system settings. |
| 47 | + */ |
| 48 | +function setPickedTheme(newTheme) { |
| 49 | + window.localStorage.setItem(localStorageKey, newTheme); |
| 50 | + autoTheme = newTheme === "auto"; |
| 51 | + if (newTheme === "auto") { |
| 52 | + var systemTheme = themeQuery.matches ? "dark" : "light"; |
| 53 | + applyTheme(systemTheme); |
| 54 | + } |
| 55 | + else { |
| 56 | + applyTheme(newTheme); |
| 57 | + } |
| 58 | +} |
| 59 | +/** |
| 60 | + * Updates the "Auto" choice of the theme dropdown to reflect the current system theme - either "Auto (light)" or "Auto (dark)" |
| 61 | + */ |
| 62 | +function updateDropdownLabel(systemTheme) { |
| 63 | + window.document.getElementById('theme-option-auto').innerText = "Auto (" + systemTheme + ")"; |
| 64 | +} |
| 65 | + |
| 66 | +/** |
| 67 | + * Checks whether color-scheme is a supported feature of the browser. |
| 68 | + * If it is not, removes the auto option from the dropdown. |
| 69 | + */ |
| 70 | +function checkThemingSupport() { |
| 71 | + var darkQuery = window.matchMedia('(prefers-color-scheme: dark)'); |
| 72 | + var lightQuery = window.matchMedia('(prefers-color-scheme: light)'); |
| 73 | + // If neither query matches, we know that the browser doesn't support theming |
| 74 | + if (!darkQuery.matches && !lightQuery.matches) { |
| 75 | + var themeOptionAuto = window.document.getElementById('theme-option-auto'); |
| 76 | + // IE doesn't support element.remove() |
| 77 | + themeOptionAuto.parentNode.removeChild(themeOptionAuto); |
| 78 | + } |
| 79 | +} |
0 commit comments