alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🎨 refactor: format JS with Prettier (#240)

Browse Source
This commit is contained in:
Óscar
2024-01-03 01:44:31 +01:00
committed by GitHub
parent 39fc4ece61
commit b6a89e6370
12 changed files with 93 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
static/js/themeSwitcher.js
View File

@@ -1,30 +1,33 @@
// Get the theme switcher button elements.
const themeSwitcher = document.querySelector(".theme-switcher");
const themeResetter = document.querySelector(".theme-resetter");
const themeSwitcher = document.querySelector('.theme-switcher');
const themeResetter = document.querySelector('.theme-resetter');
const defaultTheme = document.documentElement.getAttribute('data-default-theme');
function getSystemThemePreference() {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
// Determine the initial theme.
let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme') || getSystemThemePreference();
let currentTheme =
localStorage.getItem('theme') ||
document.documentElement.getAttribute('data-theme') ||
getSystemThemePreference();
function setTheme(theme, saveToLocalStorage = false) {
document.documentElement.setAttribute("data-theme", theme);
document.documentElement.setAttribute('data-theme', theme);
currentTheme = theme;
themeSwitcher.setAttribute("aria-pressed", theme === "dark");
themeSwitcher.setAttribute('aria-pressed', theme === 'dark');
if (saveToLocalStorage) {
localStorage.setItem("theme", theme);
themeResetter.classList.add("has-custom-theme");
localStorage.setItem('theme', theme);
themeResetter.classList.add('has-custom-theme');
} else {
localStorage.removeItem("theme");
themeResetter.classList.remove("has-custom-theme");
localStorage.removeItem('theme');
themeResetter.classList.remove('has-custom-theme');
}
// Dispatch a custom event for comment systems.
window.dispatchEvent(new CustomEvent("themeChanged", { detail: { theme } }));
window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme } }));
}
function resetTheme() {
@@ -33,22 +36,24 @@ function resetTheme() {
// Function to switch between dark and light themes.
function switchTheme() {
setTheme(currentTheme === "dark" ? "light" : "dark", true);
setTheme(currentTheme === 'dark' ? 'light' : 'dark', true);
}
// Initialize the theme switcher button.
themeSwitcher.addEventListener("click", switchTheme);
themeResetter.addEventListener("click", resetTheme);
themeSwitcher.addEventListener('click', switchTheme);
themeResetter.addEventListener('click', resetTheme);
// Update the theme based on system preference if necessary.
if (!defaultTheme) {
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
setTheme(e.matches ? "dark" : "light");
});
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (e) => {
setTheme(e.matches ? 'dark' : 'light');
});
}
// Set initial ARIA attribute and custom theme class.
themeSwitcher.setAttribute("aria-pressed", currentTheme === "dark");
if (localStorage.getItem("theme")) {
themeResetter.classList.add("has-custom-theme");
themeSwitcher.setAttribute('aria-pressed', currentTheme === 'dark');
if (localStorage.getItem('theme')) {
themeResetter.classList.add('has-custom-theme');
}