创建用于更改浏览器页面样式html的主题界面的开关 [英] create switch for changing theme intead of browser page style html

问题描述

我通过以下方式在HTML页面中添加了主题：

I added a theme in my HTML page by:

<link rel="alternate stylesheet" href="css/dark.css" title="dark">

这将创建一个选项，可以按预期在浏览器中从view> style切换主题。我想在页面本身中创建一个用于更改主题的开关。 < button>切换主题< / button> 将创建一个按钮，但是如何使其成为切换主题？

this creates an option to switch theme from view>style in browser as it is expected to. I want to create a switch in the page itself for changing the theme. <button>Switch Theme</button>will create a button but how do I make it switch theme?

推荐答案

您应该触发< link> href 属性的更改c>单击按钮上的标记，如下所示：

You should trigger a change in the href attribute of the <link> tag on the click of the button, as demonstrated:

HTML

<link rel="stylesheet" href="dark.css" id="theme">
<button id="switch">Switch Theme</button>

JavaScript

document.getElementById('switch').onclick = function() {
  if (document.getElementById('theme').href == "dark.css") {
    document.getElementById('theme').href = "light.css";
  } else {
    document.getElementById('theme').href = "dark.css";
  }
};

现在， dark.css 和 light.css 将分别为两个主题的元素包含不同的样式。例如：

Now, the dark.css and light.css would contain different styles for your elements for both the themes respectively. For example:

dark.css

dark.css

body{
    background: #000;
}

light.css >

light.css

body{
    background: #fff;
}

这篇关于创建用于更改浏览器页面样式html的主题界面的开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！