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