■ ■ ■ ■ ■ ■
src/main/resources/static/theme-toggle.js
1 | 1 | | (function () { |
| 2 | + | const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); |
| 3 | + | |
| 4 | + | const initialTheme = darkModeMediaQuery.matches || localStorage.getItem('darkMode') === 'true'; |
| 5 | + | |
2 | 6 | | function updateToggle (darkMode) { |
3 | 7 | | document.querySelector(".theme-toggle input[type=radio][value='dark']").checked = darkMode |
4 | 8 | | document.querySelector(".theme-toggle input[type=radio][value='light']").checked = !darkMode |
5 | 9 | | |
6 | 10 | | document.body.classList.toggle('dark-mode', darkMode) |
7 | | - | localStorage.setItem('theme', darkMode ? 'dark' : 'light') |
| 11 | + | localStorage.setItem('darkMode', darkMode) |
8 | 12 | | } |
9 | 13 | | |
| 14 | + | darkModeMediaQuery.addEventListener('change', (e) => { |
| 15 | + | const darkModeOn = e.matches |
| 16 | + | updateToggle(darkModeOn) |
| 17 | + | }) |
| 18 | + | |
10 | 19 | | window.addEventListener('load', function () { |
11 | 20 | | const radios = document.querySelectorAll('.theme-toggle input[type=radio]') |
12 | 21 | | radios.forEach((radio) => { |
| skipped 2 lines |
15 | 24 | | }) |
16 | 25 | | }) |
17 | 26 | | |
18 | | - | const storedTheme = localStorage.getItem('theme') |
19 | | - | if (storedTheme === 'dark') { |
20 | | - | updateToggle(true) |
21 | | - | } else { |
22 | | - | updateToggle(false) |
23 | | - | } |
| 27 | + | updateToggle(initialTheme) |
24 | 28 | | }) |
25 | | - | })(); |
| 29 | + | })() |
26 | 30 | | |