From fc6a961ad0429f082912c37431ed3e71510c6dfb Mon Sep 17 00:00:00 2001 From: Ekaitz Zarraga Date: Wed, 27 May 2020 16:08:24 +0200 Subject: Add web template for embedded css --- templates/web/js/colorscheme-switcher.js | 52 ++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 templates/web/js/colorscheme-switcher.js (limited to 'templates/web/js') diff --git a/templates/web/js/colorscheme-switcher.js b/templates/web/js/colorscheme-switcher.js new file mode 100644 index 0000000..dc0a7bd --- /dev/null +++ b/templates/web/js/colorscheme-switcher.js @@ -0,0 +1,52 @@ +var theme_switch = document.getElementById("dark-light-switch"); +var body = document.getElementsByTagName("BODY")[0]; + + + +function init( color ){ + change(color, true); + localStorage.setItem('color', color); + theme_switch.setAttribute("color", color); +} + +function change(color, nowait){ + // Discard transition is nowait is set + if(nowait !== true){ + window.setTimeout(function() { + document.documentElement.classList.remove('color-theme-in-transition') + }, 1000) + document.documentElement.classList.add('color-theme-in-transition'); + } + + document.documentElement.setAttribute('data-theme', color); + theme_switch.setAttribute("color", color); + localStorage.setItem("color", color); +} + +function theme_change_requested(){ + color = theme_switch.getAttribute("color"); + if(color=="light") + change("dark"); + else + change("light"); +} + +function getCurrentColor(){ + // Color was set before in localStorage + var storage_color = localStorage.getItem("color"); + if(storage_color !== null){ + return storage_color; + } + + // If local storage is not set check the background of the page + // This is dependant of the CSS, be careful + var background = getComputedStyle(body).getPropertyValue("background-color"); + if(background == "rgb(255, 255, 255)") { + return "light"; + } else { + return "dark"; + } +} + +init( getCurrentColor() ) +theme_switch.addEventListener("click", theme_change_requested); -- cgit v1.2.3