jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Correction dark mode : unification sur la clé localStorage 'theme'

Browse source 
Le script anti-flicker lisait 'dark_mode' alors que le toggle (DarkModeToggle.astro) écrivait dans 'theme', rendant la persistance du dark mode inopérante. Suppression du code dark mode mort dans main.js (showDay/showNight, listener #darkToggle, window.darkMode) qui référençait des éléments HTML supprimés du header.
This commit is contained in:
Jalil Arfaoui 2026-02-17 01:08:43 +01:00
parent 86b13fb6b4
commit 24b63d4e9b
2 changed files with 1 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
src/assets/js/main.js
View file

@ -1,7 +1,3 @@
// Add your javascript here
window.darkMode = false;
const stickyClasses = ["fixed", "h-14"];
const unstickyClasses = ["absolute", "h-20"];
const stickyClassesContainer = [
@ -17,32 +13,12 @@ let headerElement = null;
document.addEventListener("DOMContentLoaded", () => {
headerElement = document.getElementById("header");
if (
localStorage.getItem("dark_mode") &&
localStorage.getItem("dark_mode") === "true"
) {
window.darkMode = true;
showNight();
} else {
showDay();
}
stickyHeaderFuncionality();
applyMenuItemClasses();
evaluateHeaderPosition();
mobileMenuFunctionality();
});
// window.toggleDarkMode = function(){
// document.documentElement.classList.toggle('dark');
// if(document.documentElement.classList.contains('dark')){
// localStorage.setItem('dark_mode', true);
// window.darkMode = true;
// } else {
// window.darkMode = false;
// localStorage.setItem('dark_mode', false);
// }
// }
window.stickyHeaderFuncionality = () => {
window.addEventListener("scroll", () => {
evaluateHeaderPosition();
@ -69,70 +45,6 @@ window.evaluateHeaderPosition = () => {
}
};
document.getElementById("darkToggle").addEventListener("click", () => {
document.documentElement.classList.add("duration-300");
if (document.documentElement.classList.contains("dark")) {
localStorage.removeItem("dark_mode");
showDay(true);
} else {
localStorage.setItem("dark_mode", true);
showNight(true);
}
});
function showDay(animate) {
document.getElementById("sun").classList.remove("setting");
document.getElementById("moon").classList.remove("rising");
let timeout = 0;
if (animate) {
timeout = 500;
document.getElementById("moon").classList.add("setting");
}
setTimeout(() => {
document.getElementById("dayText").classList.remove("hidden");
document.getElementById("nightText").classList.add("hidden");
document.getElementById("moon").classList.add("hidden");
document.getElementById("sun").classList.remove("hidden");
if (animate) {
document.documentElement.classList.remove("dark");
document.getElementById("sun").classList.add("rising");
}
}, timeout);
}
function showNight(animate) {
document.getElementById("moon").classList.remove("setting");
document.getElementById("sun").classList.remove("rising");
let timeout = 0;
if (animate) {
timeout = 500;
document.getElementById("sun").classList.add("setting");
}
setTimeout(() => {
document.getElementById("nightText").classList.remove("hidden");
document.getElementById("dayText").classList.add("hidden");
document.getElementById("sun").classList.add("hidden");
document.getElementById("moon").classList.remove("hidden");
if (animate) {
document.documentElement.classList.add("dark");
document.getElementById("moon").classList.add("rising");
}
}, timeout);
}
window.applyMenuItemClasses = () => {
const menuItems = document.querySelectorAll("#menu a");
for (let i = 0; i < menuItems.length; i++) {
@ -140,7 +52,6 @@ window.applyMenuItemClasses = () => {
menuItems[i].classList.add("text-neutral-900", "dark:text-white");
}
}
//:class="{ 'text-neutral-900 dark:text-white': window.location.pathname == '{menu.url}', 'text-neutral-700 dark:text-neutral-400': window.location.pathname != '{menu.url}' }"
};
function mobileMenuFunctionality() {

5
src/layouts/main.astro
View file

@ -15,10 +15,7 @@ const { title } = Astro.props;
<!-- Used to add dark mode right away, adding here prevents any flicker -->
<script is:inline>
if (typeof Storage !== 'undefined') {
if (
localStorage.getItem('dark_mode') &&
localStorage.getItem('dark_mode') == 'true'
) {
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark')
}
}