0

I have a question, I’m using a free template of HTML5 UP Editorial and want to make a button which will switch a theme from light to dark. I did it to one page, to main page, its switches to dark, but if I go to another page (in my example from HOMEPAGE to ELEMENTS) its resets to default light theme. Is it possible to make it dark on all pages if someone clicked a dark theme on main page? and again if someone click light it swtiches to light theme on all pages. Its 100% HTML so I dont know if I should use java, or other option.

Heres my workspace: http://foodtek.eu/pub/index.html (on the top-right corner - is icons to switch theme)

I wish to make it works like here: https://learn.microsoft.com/en-us/windows-hardware/drivers/debugger/-lmi

function swapStyleSheet(sheet){
 document.getElementById('pagestyle').setAttribute('href', sheet);
}
<li><a href="#" class="icon fa-sun-o" onclick="swapStyleSheet('assets/css/main_light.css')"><span class="label">Light Style Sheet</span></a></li>
<li><a href="#" class="icon fa-moon-o" onclick="swapStyleSheet('assets/css/main_dark.css')"><span class="label">Dark Style Sheet</span></a></li>
achoj22214
  • 1
  • 2

1 Answers1

0
function setTheme(isDark) {
    if (isDark) {
        localStorage$1.setItem("theme", nightClassName);
        html.add(nightClassName);
    } else {
        html.remove(nightClassName);
        localStorage$1.removeItem("theme");
    }
}
kaluogh
  • 64
  • 5