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