82 lines
2.9 KiB
JavaScript
82 lines
2.9 KiB
JavaScript
const FA_ICON = document.querySelector('.fa-moon');
|
|
const LINK_FA = document.querySelector('.navend > a');
|
|
|
|
// Fonction pour définir un cookie
|
|
function setCookie(name, value, days) {
|
|
const expires = new Date();
|
|
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
|
|
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
|
|
}
|
|
|
|
// Fonction pour récupérer la valeur d'un cookie
|
|
function getCookie(name) {
|
|
const cookieName = `${name}=`;
|
|
const cookies = document.cookie.split(';');
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
let cookie = cookies[i].trim();
|
|
if (cookie.indexOf(cookieName) === 0) {
|
|
return cookie.substring(cookieName.length, cookie.length);
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// Charger le thème en fonction du cookie au chargement initial de la page
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const currentTheme = getCookie('theme');
|
|
if (currentTheme === 'light') {
|
|
// Charger le thème sombre
|
|
FA_ICON.classList.add('fa-moon');
|
|
FA_ICON.classList.remove('fa-sun');
|
|
loadDarkTheme();
|
|
} else {
|
|
// Par défaut, charger le thème clair
|
|
FA_ICON.classList.add('fa-sun');
|
|
FA_ICON.classList.remove('fa-moon');
|
|
loadLightTheme();
|
|
}
|
|
});
|
|
|
|
// Écouter l'événement clic sur l'icône
|
|
FA_ICON.addEventListener('click', () => {
|
|
FA_ICON.classList.toggle('fa-moon');
|
|
FA_ICON.classList.toggle('fa-sun');
|
|
|
|
if (FA_ICON.classList.contains('fa-moon')) {
|
|
// Charger le thème clair
|
|
loadLightTheme();
|
|
// Enregistrer le choix du thème dans le cookie
|
|
setCookie('theme', 'light', 30); // Le cookie expire après 30 jours
|
|
} else {
|
|
// Charger le thème sombre
|
|
loadDarkTheme();
|
|
// Enregistrer le choix du thème dans le cookie
|
|
setCookie('theme', 'dark', 30); // Le cookie expire après 30 jours
|
|
}
|
|
});
|
|
|
|
// Fonction pour charger le thème clair
|
|
function loadLightTheme() {
|
|
const existingLink = document.querySelector('link[href*="colors_dark.css"]');
|
|
if (existingLink) {
|
|
const newLink = document.createElement('link');
|
|
newLink.rel = 'stylesheet';
|
|
newLink.href = '/static/css/colors_light.css';
|
|
existingLink.parentNode.replaceChild(newLink, existingLink);
|
|
} else {
|
|
console.error("Feuille de style 'colors_dark.css' non trouvée ou inaccessible.");
|
|
}
|
|
}
|
|
|
|
// Fonction pour charger le thème sombre
|
|
function loadDarkTheme() {
|
|
const existingLink = document.querySelector('link[href*="colors_light.css"]');
|
|
if (existingLink) {
|
|
const newLink = document.createElement('link');
|
|
newLink.rel = 'stylesheet';
|
|
newLink.href = '/static/css/colors_dark.css';
|
|
existingLink.parentNode.replaceChild(newLink, existingLink);
|
|
} else {
|
|
console.error("Feuille de style 'colors_light.css' non trouvée ou inaccessible.");
|
|
}
|
|
}
|