From 5a8eeea8c1533cb8b21ae51be465dfe9f881b338 Mon Sep 17 00:00:00 2001 From: Simone Bortolin Date: Thu, 4 Aug 2022 19:36:44 +0200 Subject: update script --- assets/js/theme-switch.js | 33 +++++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/assets/js/theme-switch.js b/assets/js/theme-switch.js index 148ef26..15c1ac2 100644 --- a/assets/js/theme-switch.js +++ b/assets/js/theme-switch.js @@ -1,21 +1,34 @@ -if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - jtd.setTheme('dark'); +if(localStorage.getItem("color-scheme") === null) { + const newColorScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light"; + const newTextScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "Light mode" : "Dark mode"; + jtd.setTheme(newColorScheme); + toggleDarkMode.textContent = newTextScheme; + localStorage.setItem("color-scheme",newColorScheme); + localStorage.setItem("text-scheme",newTextScheme); } else { - jtd.setTheme('light'); + jtd.setTheme(localStorage.getItem("color-scheme")); + toggleDarkMode.textContent = localStorage.getItem("text-scheme"); } window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { - const newColorScheme = event.matches ? "dark" : "light"; - jtd.setTheme(newColorScheme); + if(localStorage.getItem("color-scheme") === null) { + const newColorScheme = event.matches ? "dark" : "light"; + const newTextScheme = event.matches ? "Light mode" : "Dark mode"; + jtd.setTheme(newColorScheme); + toggleDarkMode.textContent = newTextScheme; + localStorage.setItem("color-scheme",newColorScheme); + localStorage.setItem("text-scheme",newTextScheme); + } }); const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); jtd.addEvent(toggleDarkMode, 'click', function(){ - if (jtd.getTheme() === 'dark') { - jtd.setTheme('light'); - toggleDarkMode.textContent = 'Preview dark color scheme'; - } else { jtd.setTheme('dark'); - toggleDarkMode.textContent = 'Return to the light side'; } + const newColorScheme = jtd.getTheme() === 'dark' ? "dark" : "light"; + const newTextScheme = jtd.getTheme() === 'dark' ? "Light mode" : "Dark mode"; + jtd.setTheme(newColorScheme); + toggleDarkMode.textContent = newTextScheme; + localStorage.setItem("color-scheme",newColorScheme); + localStorage.setItem("text-scheme",newTextScheme); }); \ No newline at end of file -- cgit v1.2.3