Cleanup code style

This commit is contained in:
RobinLinus 2020-12-21 03:10:43 +01:00
parent c71208b1a0
commit 68f11f99cf

View file

@ -1,37 +1,37 @@
(function(){ (function(){
// Select the button // Select the button
const btnTheme = document.getElementById("theme"); const btnTheme = document.getElementById('theme');
// Check for dark mode preference at the OS level // Check for dark mode preference at the OS level
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
// Get the user's theme preference from local storage, if it's available // Get the user's theme preference from local storage, if it's available
const currentTheme = localStorage.getItem("theme"); const currentTheme = localStorage.getItem('theme');
// If the user's preference in localStorage is dark... // If the user's preference in localStorage is dark...
if (currentTheme == "dark") { if (currentTheme == 'dark') {
// ...let's toggle the .dark-theme class on the body // ...let's toggle the .dark-theme class on the body
document.body.classList.toggle("dark-theme"); document.body.classList.toggle('dark-theme');
// Otherwise, if the user's preference in localStorage is light... // Otherwise, if the user's preference in localStorage is light...
} else if (currentTheme == "light") { } else if (currentTheme == 'light') {
// ...let's toggle the .light-theme class on the body // ...let's toggle the .light-theme class on the body
document.body.classList.toggle("light-theme"); document.body.classList.toggle('light-theme');
} }
// Listen for a click on the button // Listen for a click on the button
btnTheme.addEventListener("click", function() { btnTheme.addEventListener('click', function() {
// If the user's OS setting is dark and matches our .dark-theme class... // If the user's OS setting is dark and matches our .dark-theme class...
if (prefersDarkScheme.matches) { if (prefersDarkScheme.matches) {
// ...then toggle the light mode class // ...then toggle the light mode class
document.body.classList.toggle("light-theme"); document.body.classList.toggle('light-theme');
// ...but use .dark-theme if the .light-theme class is already on the body, // ...but use .dark-theme if the .light-theme class is already on the body,
var theme = document.body.classList.contains("light-theme") ? "light" : "dark"; var theme = document.body.classList.contains('light-theme') ? 'light' : 'dark';
} else { } else {
// Otherwise, let's do the same thing, but for .dark-theme // Otherwise, let's do the same thing, but for .dark-theme
document.body.classList.toggle("dark-theme"); document.body.classList.toggle('dark-theme');
var theme = document.body.classList.contains("dark-theme") ? "dark" : "light"; var theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
} }
// Finally, let's save the current preference to localStorage to keep using it // Finally, let's save the current preference to localStorage to keep using it
localStorage.setItem("theme", theme); localStorage.setItem('theme', theme);
}); });
})(); })();