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