■ ■ ■ ■ ■ ■
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 | + | var 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 | | - | const initialTheme = darkModeMediaQuery.matches || localStorage.getItem('darkMode') === 'true' |
| 5 | 10 | | |
| 6 | | - | function updateToggle (darkMode) { |
| 7 | | - | document.querySelector(".theme-toggle input[type=radio][value='dark']").checked = darkMode |
| 8 | | - | document.querySelector(".theme-toggle input[type=radio][value='light']").checked = !darkMode |
| 9 | | - | |
| 10 | | - | document.body.classList.toggle('dark-mode', darkMode) |
| 11 | | - | localStorage.setItem('darkMode', darkMode) |
| 12 | | - | } |
| | 11 | + | function updateToggle(darkMode) { |
| | 12 | + | document.querySelector(".theme-toggle input[type=radio][value='dark']").checked = darkMode |
| | 13 | + | document.querySelector(".theme-toggle input[type=radio][value='light']").checked = !darkMode |
| 13 | 14 | | |
| 14 | | - | darkModeMediaQuery.addEventListener('change', (e) => { |
| 15 | | - | const darkModeOn = e.matches |
| 16 | | - | updateToggle(darkModeOn) |
| 17 | | - | }) |
| | 15 | + | document.body.classList.toggle('dark-mode', darkMode) |
| | 16 | + | localStorage.setItem('darkMode', darkMode) |
| | 17 | + | localStorage.setItem('darkmode-pref-set', "true") |
| | 18 | + | } |
| 18 | 19 | | |
| 19 | | - | window.addEventListener('load', function () { |
| 20 | | - | const radios = document.querySelectorAll('.theme-toggle input[type=radio]') |
| 21 | | - | radios.forEach((radio) => { |
| 22 | | - | radio.addEventListener('change', function (e) { |
| 23 | | - | updateToggle(e.target.value === 'dark') |
| 24 | | - | }) |
| | 20 | + | darkModeMediaQuery.addEventListener('change', (e) => { |
| | 21 | + | const darkModeOn = e.matches |
| | 22 | + | updateToggle(darkModeOn) |
| 25 | 23 | | }) |
| 26 | 24 | | |
| 27 | | - | updateToggle(initialTheme) |
| 28 | | - | }) |
| | 25 | + | window.addEventListener('load', function () { |
| | 26 | + | const radios = document.querySelectorAll('.theme-toggle input[type=radio]') |
| | 27 | + | radios.forEach((radio) => { |
| | 28 | + | radio.addEventListener('change', function (e) { |
| | 29 | + | updateToggle(e.target.value === 'dark') |
| | 30 | + | }) |
| | 31 | + | }) |
| | 32 | + | |
| | 33 | + | updateToggle(initialTheme) |
| | 34 | + | }) |
| 29 | 35 | | })() |
| 30 | 36 | | |
Turjo Chowdhury
committed
with
GitHub
1 year ago
1 parent ffcf57fc