修改

Question

对于我的网站，我有两个不同的CSS文件。一个用于以黑暗主题显示网站，另一个以浅色主题显示。

现在我想让用户在两个主题之间切换。但我不知道如何实现这一点。我不想创建两个HTML文件，唯一的区别是一个链接标记指向light主题，另一个指向黑暗主题。

最好的解决方案是用户只需点击一个按钮即可更新主题而无需重新加载。

这可能吗？

谢谢！

修改

决定采用this回答。谢谢@void

Answer 1

为您的样式表链接指定一个ID ..

<link rel=stylesheet href=mycss.css id=shtylesheet>

然后你可以用javascript改变它

function changeStylesheet(newstylesheet){
    document.getElementById('shtylesheet').setAttribute('href', newstylesheet);
}

然后，如果你想做按钮或什么

<button onclick="changeStylesheet('light.css')">Lights on</button>
<button onclick="changeStylesheet('dark.css')">Lights off</button>

Answer 2

您可以通过将ID设置为链接标记来在运行时切换主题，如下所示：

在您的HTML文件中：

<link type="text/css" rel="stylesheet" media="all" href="../light.css" id="theme_css" />

JS

<button onclick="switchTheme()">Switch Theme</button>

<script>
function switchTheme() {
  var check = document
  .getElementById('theme_css')
  .classList[0] === 'light';

  var element = document.getElementById('theme_css');


  if (check) {
   element.href = '../dark.css';
   element.classList.remove('light')
   element.classList.add('dark');
  } else {
   element.href = '../light.css';
   element.classList.remove('dark')
   element.classList.add('light');
  }

}
</script>

更新

我已经更新了我的解决方案，使其更具动态性。您可以使用一个按钮切换明暗主题按钮。

切换网站的主题/ CSS文件

修改

2 个答案: