Mercurial
comparison mrjunejune/src/index.js @ 84:bcc76a156aea
Updated to be called src instead of pages.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Thu, 01 Jan 2026 13:01:10 -0800 |
| parents | mrjunejune/pages/index.js@1ded13720541 |
| children |
comparison
equal
deleted
inserted
replaced
| 83:49b611c808e7 | 84:bcc76a156aea |
|---|---|
| 1 const THEME_STORAGE_KEY = 'theme-preference'; | |
| 2 // Get stored preference or detect system preference | |
| 3 function getThemePreference() | |
| 4 { | |
| 5 const stored = localStorage.getItem(THEME_STORAGE_KEY); | |
| 6 if (stored) { | |
| 7 return stored; | |
| 8 } | |
| 9 return 'auto'; | |
| 10 } | |
| 11 | |
| 12 function applyTheme(preference) | |
| 13 { | |
| 14 const root = document.documentElement; | |
| 15 | |
| 16 if (preference === 'light') { | |
| 17 root.classList.remove('dark', 'auto'); | |
| 18 root.classList.add('light-mode'); | |
| 19 } else if (preference === 'dark') { | |
| 20 root.classList.remove('light-mode', 'auto'); | |
| 21 root.classList.add('dark'); | |
| 22 } else { | |
| 23 // Auto - remove manual overrides and let CSS media query handle it | |
| 24 root.classList.remove('light-mode', 'dark'); | |
| 25 root.classList.add('auto'); | |
| 26 } | |
| 27 } | |
| 28 | |
| 29 (function() { | |
| 30 const currentPreference = getThemePreference(); | |
| 31 applyTheme(currentPreference); | |
| 32 })(); | |
| 33 | |
| 34 /* Toggle lights auto and dark */ | |
| 35 const toggle = document.querySelector('#themeToggle'); | |
| 36 toggle.addEventListener('click', function() { | |
| 37 let preference = getThemePreference(); | |
| 38 | |
| 39 // Cycle through: auto -> light -> dark -> auto | |
| 40 if (preference === 'auto') { | |
| 41 preference = 'light'; | |
| 42 } else if (preference === 'light') { | |
| 43 preference = 'dark'; | |
| 44 } else { | |
| 45 preference = 'auto'; | |
| 46 } | |
| 47 | |
| 48 localStorage.setItem(THEME_STORAGE_KEY, preference); | |
| 49 applyTheme(preference); | |
| 50 }); |