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

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

本文关键字：网站 样式 何使用 变化      更新时间：2023-09-26

我有一个我从零开始制作的Github Pages网站。我想让主题，用户可以选择从网站上的单选按钮。所以，我做了两个不同的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";，主题变成黑暗时，第一个单选按钮被选中。反之亦然

尝试使用其他样式表。

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

样式表和备选样式表之间的切换

与其物理地从头部交换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标签上时(在我的例子中)，每个样式表中的样式才会被启用。

相关文章：