【问题标题】：Switching website's theme/css file [duplicate]切换网站的主题/css文件[重复]
【发布时间】：2018-02-14 20:23:45
【问题描述】：

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

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

最好的解决方案是用户只需点击一个按钮，主题就会改变而无需重新加载。

这可能吗？

谢谢！

编辑

决定使用this 的答案。谢谢@void

【问题讨论】：

我仍然会建议更好的方法stackoverflow.com/a/48796000/1496715

标签： javascript html css

【解决方案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>

【讨论】：

您不认为使用这种方法，样式转换可能会很突然。此外，获取新的 CSS 文件需要一些时间，然后用户可能需要等待才能看到转换？在这里查看我的答案stackoverflow.com/a/48796000/1496715
@void - 这可能是一种更好的方法，我给定的方法有很多可以改进的地方，这只是我在 5 分钟内能想到的最简单的答案.. +1
是的，完全同意...

【解决方案2】：

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

在您的 HTML 文件中：

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

<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>

更新。

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

【讨论】：

很好的答案，谢谢。 media="all" 条目的目的是什么？