更改CSS中的背景颜色（网站上的明暗主题）

Question

我有一个问题，我正在使用免费的HTML5 UP编辑模板，并希望创建一个按钮，将主题从浅色切换为深色。 我将其转到一页，转到主页，它切换为暗色，但是如果转到另一页（在我的示例中，从首页到ELEMENTS），则将其重置为默认的浅色主题。 如果有人单击主页上的深色主题，是否可以在所有页面上将其设为深色？ 再次，如果有人单击指示灯，它会闪烁以点亮所有页面上的主题。 它的100％HTML，所以我不知道是否应该使用Java或其他选项。

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

我希望使它像这里一样工作： https : //docs.microsoft.com/zh-cn/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");
    }
}

Answer 2

如何使主题适用于所有页面？

您可以使用JavaScript cookie将信息存储在用户计算机上，这些信息可以在页面之间读取，从而共享您对深色主题的偏好。

您可以在此处了解有关使用JavaScript更改样式表的更多信息。

您可以在此处了解有关阅读Cookie的更多信息。

 (function() { if (document.cookie.indexOf('theme=') != -1) { switchTheme(getCookie("theme")); } else { switchTheme('light'); } })(); function swapStyleSheet(theme) { document.getElementById("css").setAttribute("href", theme); } function switchTheme(theme) { document.cookie = "theme=" + theme; swapStyleSheet("assets/css/main_" + theme + ".css"); }

 <!doctype html> <html> <head> <title>Theme Toggle Example</title> <link id="css" rel="stylesheet" href="assets/css/main_light.css" /> </head> <body> <h2>Theme Toggle Example</h2> <a href="javascript:void(0);" onclick="switchTheme('light');">Light Theme</a> | <a href="javascript:void(0);" onclick="switchTheme('dark');"> Dark Theme</a> </body> </html>

更改CSS中的背景颜色（网站上的明暗主题）

问题描述

2 个解决方案

解决方案1
0 2018-11-26 01:38:31

解决方案2
0 2018-11-26 01:54:41

如何使主题适用于所有页面？

看起来像什么？

更改CSS中的背景颜色（网站上的明暗主题）

问题描述

2 个解决方案

解决方案1 0 2018-11-26 01:38:31

解决方案2 0 2018-11-26 01:54:41

如何使主题适用于所有页面？

看起来像什么？

解决方案1
0 2018-11-26 01:38:31

解决方案2
0 2018-11-26 01:54:41