更改 CSS 中的背景颜色（现场明暗主题）

Question

我有一个问题，我正在使用 HTML5 UP 编辑的免费模板，并想制作一个按钮，可以将主题从浅色切换到深色。我做了一个页面，主页，它切换到黑暗，但如果我去另一个页面（在我的例子中从主页到元素）它重置为默认的浅色主题。如果有人单击主页上的深色主题，是否可以在所有页面上使其变暗？再次，如果有人点击灯光它会在所有页面上点亮主题。它是 100% HTML，所以我不知道我应该使用 java 还是其他选项。

这是我的工作区：http://foodtek.eu/pub/index.html（在右上角 - 是切换主题的图标）

我希望让它像这里一样工作：https://docs.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>

Answer 1

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