alejandrogs73
4fb49961b4
All checks were successful
Zola / build-and-deploy (push) Successful in 11s
- Implementado tema Apollo como base visual. - Segregación de contenido: Artículos movidos a /blog. - Creación de identidad: Nueva página 'Sobre mí' (about.md). - CI/CD: Actualizado workflow para soporte de submódulos recursivos. - UX: Ajustes en homepage para listado de últimos posts.
82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
function setTheme(mode) {
|
|
localStorage.setItem("theme-storage", mode);
|
|
}
|
|
|
|
// Functions needed for the theme toggle
|
|
//
|
|
|
|
function toggleTheme() {
|
|
const currentTheme = getSavedTheme();
|
|
if (currentTheme === "light") {
|
|
setTheme("dark");
|
|
updateItemToggleTheme();
|
|
} else if (currentTheme === "dark") {
|
|
setTheme("auto");
|
|
updateItemToggleTheme();
|
|
} else {
|
|
setTheme("light");
|
|
updateItemToggleTheme();
|
|
}
|
|
}
|
|
|
|
function updateItemToggleTheme() {
|
|
let mode = getSavedTheme();
|
|
|
|
const darkModeStyle = document.getElementById("darkModeStyle");
|
|
if (darkModeStyle) {
|
|
if (mode === "dark" || (mode === "auto" && getSystemPrefersDark())) {
|
|
darkModeStyle.disabled = false;
|
|
} else {
|
|
darkModeStyle.disabled = true;
|
|
}
|
|
}
|
|
|
|
const sunIcon = document.getElementById("sun-icon");
|
|
const moonIcon = document.getElementById("moon-icon");
|
|
const autoIcon = document.getElementById("auto-icon");
|
|
if (sunIcon && moonIcon && autoIcon) {
|
|
sunIcon.style.display = (mode === "light") ? "block" : "none";
|
|
moonIcon.style.display = (mode === "dark") ? "block" : "none";
|
|
autoIcon.style.display = (mode === "auto") ? "block" : "none";
|
|
|
|
if (mode === "auto") {
|
|
autoIcon.style.filter = getSystemPrefersDark() ? "invert(1)" : "invert(0)";
|
|
} else {
|
|
autoIcon.style.filter = "none";
|
|
}
|
|
}
|
|
|
|
let htmlElement = document.querySelector("html");
|
|
if (mode === "dark" || (mode === "auto" && getSystemPrefersDark())) {
|
|
htmlElement.classList.remove("light")
|
|
htmlElement.classList.add("dark")
|
|
} else {
|
|
htmlElement.classList.remove("dark")
|
|
htmlElement.classList.add("light")
|
|
}
|
|
}
|
|
|
|
function getSystemPrefersDark() {
|
|
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
}
|
|
|
|
function getSavedTheme() {
|
|
let currentTheme = localStorage.getItem("theme-storage");
|
|
if(!currentTheme) {
|
|
currentTheme = getSystemPrefersDark() ? "dark" : "light";
|
|
}
|
|
|
|
return currentTheme;
|
|
}
|
|
|
|
// Update the toggle theme on page load
|
|
updateItemToggleTheme();
|
|
|
|
// Listen for system theme changes in auto mode
|
|
if (window.matchMedia) {
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
|
|
if (getSavedTheme() === "auto") {
|
|
updateItemToggleTheme();
|
|
}
|
|
});
|
|
}
|