| ;(function () { |
| const supportsLocalStorage = (() => { |
| try { |
| localStorage.setItem('test', 'test'); |
| localStorage.removeItem('test'); |
| return true; |
| } catch (e) { |
| return false; |
| } |
| })(); |
| |
| const settingKey = "use-dark-theme"; |
| |
| function toggleDarkTheme(isDark) { |
| currentlyDark = isDark |
| // this triggers the `:root.theme-dark` rule from scalastyle.css, |
| // which changes the values of a bunch of CSS color variables |
| document.documentElement.classList.toggle("theme-dark", isDark); |
| supportsLocalStorage && localStorage.setItem(settingKey, isDark); |
| } |
| |
| /* Infer a dark/light theme preference from the user's system */ |
| const colorSchemePrefMql = window.matchMedia("(prefers-color-scheme: dark)"); |
| |
| /* This needs to happen ASAP so we don't get a FOUC of bright colors before the dark theme is applied */ |
| const initiallyDark = (() => { |
| const storedSetting = supportsLocalStorage && localStorage.getItem(settingKey); |
| return (storedSetting === null) ? colorSchemePrefMql.matches : storedSetting === "true"; |
| })(); |
| let currentlyDark = initiallyDark; |
| toggleDarkTheme(initiallyDark); |
| |
| /* Wait for the DOM to be loaded before we try to attach event listeners to things in the DOM */ |
| window.addEventListener("DOMContentLoaded", () => { |
| const themeToggler = document.querySelector('#theme-toggle input'); |
| themeToggler.checked = !currentlyDark; |
| themeToggler.addEventListener("change", e => { |
| toggleDarkTheme(!e.target.checked); |
| }); |
| |
| /* Auto-swap the dark/light theme if the user changes it in their system */ |
| colorSchemePrefMql.addEventListener('change', e => { |
| const preferDark = e.matches; |
| themeToggler.checked = !preferDark; |
| toggleDarkTheme(preferDark); |
| }); |
| }); |
| })(); |