Question

我有一个Github Pages网站，我是从头开始制作的。我想制作用户可以在网站上用单选按钮选择的主题。所以，我制作了2个不同的CSS样式表，名为darkTheme.css和lightTheme.css。通常，如果我只有一个样式表，我可以直接在头部链接它。在我的情况下，我有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函数来更改需要重新定位的最高级别（就嵌套而言）的类，在我的示例中，我使用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元素上的类时，浏览器将触发重新渲染，所有主题样式都将向下移动并生效。

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

头部的所有样式表都可以编译为浏览器的一组样式。每个样式表中的样式只有在正确的类选择器打开（在我的示例中）body标记时才会启用。

Answer 2

尝试使用备用样式表。

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

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

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

2 个答案: