2022-05-19 23:42:25 +02:00
|
|
|
let toggleButton
|
|
|
|
|
let icon
|
2022-04-09 21:45:15 -07:00
|
|
|
|
|
|
|
|
function load() {
|
2022-05-19 23:42:25 +02:00
|
|
|
'use strict'
|
2022-04-09 21:45:15 -07:00
|
|
|
|
2022-05-19 23:42:25 +02:00
|
|
|
toggleButton = document.createElement('button')
|
|
|
|
|
toggleButton.setAttribute('title', 'Toggle dark mode')
|
|
|
|
|
toggleButton.classList.add('dark-mode-toggle')
|
|
|
|
|
icon = document.createElement('i')
|
|
|
|
|
icon.classList.add('fa', darkModeState ? 'fa-sun-o' : 'fa-moon-o')
|
|
|
|
|
toggleButton.appendChild(icon)
|
|
|
|
|
document.body.prepend(toggleButton)
|
2022-04-09 21:45:15 -07:00
|
|
|
|
|
|
|
|
// Listen for changes in the OS settings
|
|
|
|
|
// addListener is used because older versions of Safari don't support addEventListener
|
|
|
|
|
// prefersDarkQuery set in <head>
|
|
|
|
|
if (prefersDarkQuery) {
|
|
|
|
|
prefersDarkQuery.addListener(function (evt) {
|
2022-05-19 23:42:25 +02:00
|
|
|
toggleDarkMode(evt.matches)
|
|
|
|
|
})
|
2022-04-09 21:45:15 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Initial setting depending on the prefers-color-mode or localstorage
|
|
|
|
|
// darkModeState should be set in the document <head> to prevent flash
|
2022-05-19 23:42:25 +02:00
|
|
|
if (darkModeState == undefined) darkModeState = false
|
|
|
|
|
toggleDarkMode(darkModeState)
|
2022-04-09 21:45:15 -07:00
|
|
|
|
|
|
|
|
// Toggles the "dark-mode" class on click and sets localStorage state
|
2022-05-19 23:42:25 +02:00
|
|
|
toggleButton.addEventListener('click', () => {
|
|
|
|
|
darkModeState = !darkModeState
|
2022-04-09 21:45:15 -07:00
|
|
|
|
2022-05-19 23:42:25 +02:00
|
|
|
toggleDarkMode(darkModeState)
|
|
|
|
|
localStorage.setItem('dark-mode', darkModeState)
|
|
|
|
|
})
|
2022-04-09 21:45:15 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function toggleDarkMode(state) {
|
2022-05-19 23:42:25 +02:00
|
|
|
document.documentElement.classList.toggle('dark-mode', state)
|
|
|
|
|
document.documentElement.classList.toggle('light-mode', !state)
|
|
|
|
|
icon.classList.remove('fa-sun-o')
|
|
|
|
|
icon.classList.remove('fa-moon-o')
|
|
|
|
|
icon.classList.add(state ? 'fa-sun-o' : 'fa-moon-o')
|
|
|
|
|
darkModeState = state
|
2022-04-09 21:45:15 -07:00
|
|
|
}
|
|
|
|
|
|
2022-05-19 23:42:25 +02:00
|
|
|
document.addEventListener('DOMContentLoaded', load)
|
