Mercurial
diff mrjunejune/pages/index.js @ 80:d55157451947
[MrJuneJune] Updating my homepage.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Thu, 01 Jan 2026 08:23:46 -0800 |
| parents | 35b1abc37969 |
| children | 1ded13720541 |
line wrap: on
line diff
--- a/mrjunejune/pages/index.js Thu Jan 01 05:57:03 2026 -0800 +++ b/mrjunejune/pages/index.js Thu Jan 01 08:23:46 2026 -0800 @@ -14,49 +14,37 @@ const root = document.documentElement; if (preference === 'light') { + root.classList.remove('dark', 'auto'); root.classList.add('light-mode'); - root.classList.remove('dark'); } else if (preference === 'dark') { - root.classList.remove('light-mode'); + root.classList.remove('light-mode', 'auto'); root.classList.add('dark'); } else { // Auto - remove manual overrides and let CSS media query handle it root.classList.remove('light-mode', 'dark'); + root.classList.add('auto'); } } -function populateHeader() -{ - fetch("/parts/headers.html") - .then(res => res.text()) - .then(headerHTML => { - const range = document.createRange(); - const fragment = range.createContextualFragment(headerHTML); - header.appendChild(fragment); - - const toggle = document.querySelector('#themeToggle'); - if (!toggle) return; - - toggle.addEventListener('click', function() { - let preference = getThemePreference(); - - // Cycle through: auto -> light -> dark -> auto - if (preference === 'auto') { - preference = 'light'; - } else if (preference === 'light') { - preference = 'dark'; - } else { - preference = 'auto'; - } - - localStorage.setItem(STORAGE_KEY, preference); - applyTheme(preference); - }); - }); -} -populateHeader(); - (function() { const currentPreference = getThemePreference(); applyTheme(currentPreference); })(); + +/* Toggle lights auto and dark */ +const toggle = document.querySelector('#themeToggle'); +toggle.addEventListener('click', function() { + let preference = getThemePreference(); + + // Cycle through: auto -> light -> dark -> auto + if (preference === 'auto') { + preference = 'light'; + } else if (preference === 'light') { + preference = 'dark'; + } else { + preference = 'auto'; + } + + localStorage.setItem(STORAGE_KEY, preference); + applyTheme(preference); +});