如何使用多个不断变化的样式表在网站上制作主题？

Question

我有一个 Github 页面网站，是我从头开始制作的。我想制作用户可以使用单选按钮在网站上选择的主题。因此，我制作了 2 个不同的 CSS 样式表，分别称为 darkTheme.css 和 lightTheme.css。通常，如果我只有一个样式表，我通常可以 link 它在头部。就我而言，我有 2 个。我有两个主要问题。

<input name="theme" value="darkTheme" id="darkTheme" type="radio" checked/>
<p>Dark</p>
<br>
<input name="theme" value="darkTheme" id="darkTheme" type="radio" />
<p>Dark</p>

所以，如果一个名为 theme = "dark"; 的变量，我希望主题是深色的，当第一个单选按钮被选中时，主题变暗。然后反之亦然。

Answer 1

为什么不从头开始物理交换 CSS 样式表，为什么不为样式表中的每个主题创建一个全局 CSS 选择器？

您可以在单选按钮上使用 onClick 或 onChange 事件来了解它们何时被更改。

然后您可以使用 jQuery 的 addClass 和 removeClass 函数来更改需要重新样式化的最高（就嵌套而言）元素的 class，在我的示例中，我使用 body标签。这将允许动态更改 CSS.

$(document).ready(function() {
    $('input[type=radio][name=theme]').change(function() {
        if (this.value == 'darkTheme') {
            $('body').removeClass('light');
            $('body').addClass('dark');
        }
        else if (this.value == 'lightTheme') {
            $('body').removeClass('dark');
            $('body').addClass('light');
        }
    });
});

当您使用 SCSS 或 SASS 进行嵌套时，样式特别简单：

.dark {
  h1 {
     color: black;
  }
  /* Dark Styles */
}

.light {
  h1 {
    color: grey;
  }
  /* Light Styles */
}

但标准 CSS 也可以：

.dark h1 {
  color: black;
}

.light h1 {
  color: grey;
}

当您更改 DOM 元素上的 class 时，浏览器将触发重新渲染，并且您的所有主题样式都会下降并生效。

此技术还允许您自由地将每个主题的所有选择器内容放入其自己的 css 文件（dark.css 和 light.css），然后您可以简单地导入both 在头部而不是交换它们。

无论如何，头部的所有样式表都会编译为浏览器的一组样式。每个样式表中的样式只有在正确的 class 选择器位于（在我的示例中）正文标记上时才会启用。

Answer 2

尝试使用备用样式表。

<link rel="stylesheet" href="theme1.css" />
<link rel="alternate stylesheet" href="theme2.css" />

什么是样式表和什么是备用样式表之间的切换。

如何使用多个不断变化的样式表在网站上制作主题？

How do you make themes on a website using multiple changing stylesheets?

javascript

css

themes