From 526c8a1e67d71e1554f8c57706ae3adcf9229b6f Mon Sep 17 00:00:00 2001 From: welpo Date: Tue, 2 May 2023 01:33:03 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20simplify=20the?= =?UTF-8?q?me=20switching=20logic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🐛 fix: ensure currentTheme is initialized correctly --- static/js/main.js | 38 ++++++++++++++++++++++---------------- static/js/main_min.js | 2 +- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index 474a886..356c7a7 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,23 +1,29 @@ -const themeSwitcher = document.querySelector('.theme-switcher'); -let currentTheme = localStorage.getItem('theme'); -let userHasManuallyChangedTheme = currentTheme !== null; +// Get the theme switcher button element. +const themeSwitcher = document.querySelector(".theme-switcher"); -function setTheme(theme) { - document.documentElement.setAttribute('data-theme', theme); - localStorage.setItem('theme', theme); - currentTheme = theme; -} +// Retrieve theme from localStorage. +let currentTheme = localStorage.getItem("theme"); +// Function to switch between dark and light themes. function switchTheme() { - const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; - setTheme(newTheme); - userHasManuallyChangedTheme = true; + // Set the new theme based on the current theme. + currentTheme = currentTheme === "dark" ? "light" : "dark"; + document.documentElement.setAttribute("data-theme", currentTheme); + localStorage.setItem("theme", currentTheme); } -themeSwitcher.addEventListener('click', switchTheme, false); +// Initialize the theme switcher button. +themeSwitcher.addEventListener("click", switchTheme, false); -window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { - if (!userHasManuallyChangedTheme) { - setTheme(e.matches ? 'dark' : 'light'); - } +// Update the theme based on system preference if the user hasn't manually changed the theme. +window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { + if (!localStorage.getItem("theme")) { + currentTheme = e.matches ? "dark" : "light"; + document.documentElement.setAttribute("data-theme", currentTheme); + } }); + +// Fix the theme switcher button not working on the first click by updating currentTheme. +if (!currentTheme) { + currentTheme = document.documentElement.getAttribute("data-theme"); +} diff --git a/static/js/main_min.js b/static/js/main_min.js index e8ee444..21b5b5a 100644 --- a/static/js/main_min.js +++ b/static/js/main_min.js @@ -1 +1 @@ -const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme"),userHasManuallyChangedTheme=null!==currentTheme;function setTheme(e){document.documentElement.setAttribute("data-theme",e),localStorage.setItem("theme",e),currentTheme=e}function switchTheme(){let e="dark"===currentTheme?"light":"dark";setTheme(e),userHasManuallyChangedTheme=!0}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{userHasManuallyChangedTheme||setTheme(e.matches?"dark":"light")}); +const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme");function switchTheme(){currentTheme="dark"===currentTheme?"light":"dark",document.documentElement.setAttribute("data-theme",currentTheme),localStorage.setItem("theme",currentTheme)}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{localStorage.getItem("theme")||(currentTheme=e.matches?"dark":"light",document.documentElement.setAttribute("data-theme",currentTheme))}),currentTheme||(currentTheme=document.documentElement.getAttribute("data-theme"));