我如何将主题应用于所有页面？

Question

我有一个问题，我正在使用免费的HTML5 UP编辑模板，希望创建一个按钮，将主题从浅色切换为深色。我将其转到一页，转到主页，它切换为暗色，但是如果转到另一页（在我的示例中，从首页到ELEMENTS），则将其重置为默认的浅色主题。如果有人单击主页上的深色主题，是否可以在所有页面上将其设为深色？再次，如果有人单击指示灯，它会闪烁以点亮所有页面上的主题。它是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");
    }
}

Answer 2

我如何将主题应用于所有页面？

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

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

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

(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 个答案:

我如何将主题应用于所有页面？

这是什么样子？