80 lines
3.1 KiB
JavaScript
80 lines
3.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Obtén el elemento del tema
|
|
const themeStylesheet = document.getElementById('theme-stylesheet');
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
|
|
if (!themeStylesheet || !themeToggle) {
|
|
console.error("No se encontró el theme-stylesheet o theme-toggle");
|
|
return;
|
|
}
|
|
|
|
// Guarda las URLs del tema oscuro y claro desde los atributos data
|
|
const lightThemeURL = themeStylesheet.getAttribute('data-light');
|
|
const darkThemeURL = themeStylesheet.getAttribute('data-dark');
|
|
|
|
// Función para activar el tema
|
|
const activateTheme = (theme) => {
|
|
themeStylesheet.href = theme === 'dark' ? darkThemeURL : lightThemeURL;
|
|
document.body.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
};
|
|
|
|
// Función para cambiar el estilo de Pygments
|
|
const changePygmentsStyle = (style) => {
|
|
const pygmentsStylesheets = {};
|
|
document.querySelectorAll('link[id^="pygments-"]').forEach(sheet => {
|
|
pygmentsStylesheets[sheet.id.replace('pygments-', '')] = sheet;
|
|
});
|
|
|
|
Object.entries(pygmentsStylesheets).forEach(([key, sheet]) => {
|
|
sheet.disabled = (key !== style);
|
|
});
|
|
|
|
localStorage.setItem('pygments-style', style);
|
|
};
|
|
|
|
// Recuperar el tema guardado en localStorage o usar 'light' por defecto
|
|
let savedTheme = localStorage.getItem('theme') || 'light';
|
|
activateTheme(savedTheme);
|
|
|
|
// Recuperar el estilo de Pygments guardado o usar el predeterminado
|
|
let savedPygmentsStyle = localStorage.getItem('pygments-style') || (savedTheme === 'dark' ? 'monokai' : 'default');
|
|
changePygmentsStyle(savedPygmentsStyle);
|
|
|
|
// Actualizar el contenido del botón de tema
|
|
themeToggle.innerHTML = `<i class="fas fa-adjust me-1"></i> ${savedTheme === 'dark' ? 'Light Mode' : 'Dark Mode'}`;
|
|
|
|
// Manejar el clic en el botón de alternar tema
|
|
themeToggle.addEventListener('click', (e) => {
|
|
e.preventDefault(); // Evitar comportamiento por defecto del enlace
|
|
|
|
// Alternar el tema
|
|
savedTheme = savedTheme === 'dark' ? 'light' : 'dark';
|
|
activateTheme(savedTheme);
|
|
|
|
// Actualizar el contenido del botón
|
|
themeToggle.innerHTML = `<i class="fas fa-adjust me-1"></i> ${savedTheme === 'dark' ? 'Light Mode' : 'Dark Mode'}`;
|
|
|
|
// Cambiar el estilo de Pygments según el tema
|
|
const defaultStyle = savedTheme === 'dark' ? 'monokai' : 'default';
|
|
changePygmentsStyle(defaultStyle);
|
|
|
|
// Guardar en localStorage
|
|
localStorage.setItem('pygments-style', defaultStyle);
|
|
|
|
// Enviar el tema al servidor para persistencia en sesión
|
|
fetch('/update-theme', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ theme: savedTheme })
|
|
}).then(response => {
|
|
if (response.ok) {
|
|
console.log('Theme updated on server');
|
|
} else {
|
|
console.error('Failed to update theme on server');
|
|
}
|
|
}).catch(err => console.error('Fetch error:', err));
|
|
});
|
|
});
|
|
|