如何使用 CSS 和 JavaScript 制作可变主题

IT技术 javascript css themes
2021-02-19 01:21:23

我对 CSS 和 JavaScript 还是很陌生，我想知道您是否可以制作一个脚本来允许您更改站点使用的样式表。

说：你有一个绿色主题，所有东西都是绿色的。你会怎么做，让用户可以通过按下按钮将其更改为红色？

有谁知道如何做到这一点？

6个回答

您可以为链接标签设置一个 Id 并在运行时切换 css。

HTML

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

JS

document.getElementById('buttonID').onclick = function () { 
    document.getElementById('theme_css').href = '../red.css';
};

快速演示：

    $( "#datepicker" ).datepicker();

$('button').button().on('click', function () {
  let linkHref = 'https://code.jquery.com/ui/1.11.4/themes/{THEME}/jquery-ui.css';

if ($('#swapTheme').prop('href').indexOf('pepper-grinder') >= 0) {
    $('#swapTheme').prop('href', linkHref.replace('{THEME}', 'black-tie'));
  } else {
    $('#swapTheme').prop('href', linkHref.replace('{THEME}', 'pepper-grinder'));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
              crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" id="swapTheme" rel="stylesheet">
<div id="datepicker"></div>
<button style="padding: 5px 15px;"> Switch Theme </button>

更改link href属性不会卸载已加载的 css 规则，对吗？
2021-04-18 01:21:23
@a55 据我所知，它将卸载/删除规则并加载新规则。您可以在开发人员工具中检查计算出的 CSS 规则。
2021-05-07 01:21:23

您可以使用CSS 变量（也称为自定义属性）进行此类更改，因为所有现代浏览器都支持它们。

因此，假设您有一个绿色/白色主题，其中绿色是主要颜色，白色是它的补充。该站点可能如下所示：

网站的外观

显示代码片段

因此，迁移到 CSS 变量的第一步是将主题颜色重构为变量--primary-color和--secondary-color. 以下是更改后样式表的外观。

您可以首先将默认主题颜色设置到:root元素样式声明中：

:root {
    --primary-color: green;
    --secondary-color: white;
}

然后，您可以替换的所有实例硬编码一起原色变量来电样式表“绿色”： var(--primary-color)。因此，您的徽标样式可能如下所示：

.header-logo {
  ...
  background-color: var(--primary-color);
  color: var(--secondary-color);
  ...
}

显示代码片段

现在，如果您打算将颜色从“绿色”更改为“红色”，您需要做的就是将 的值更改--primary-color为“红色”。而且，您可以使用 Javascript 做到这一点！

使用纯 JS，您可以使用以下方法将颜色设置为红色：

document.body.style.setProperty("--primary-color", "red");

或者，使用 jQuery，您可以执行以下操作：

$(document.body).css("--primary-color", "red");

显示代码片段

我更进一步，创建了一些按钮来展示如何允许用户选择一组主题颜色 - 并使用 jQuery 更改 CSS 变量的值。

下面是 Chrome 64 上的代码片段 - 如果您仍在使用不支持 CSS 变量的浏览器：

主题转换器

显示代码片段

如果这对您很重要，它似乎在 IE 中不起作用。caniuse.com/#feat=css-variables
2021-04-25 01:21:23
@SeanMC 我想这会在一定程度上覆盖它npmjs.com/package/css-vars-ponyfill
2021-05-05 01:21:23
我认为它不适用于有点旧的浏览器
2021-05-05 01:21:23
正是我要找的。谢谢详细解答！
2021-05-07 01:21:23

是的，您可以使用 Javascript 更改 CSS。有关更多信息，请参阅本教程。它基本上像这样链接多个样式表：

<link rel="stylesheet" type="text/css" title="blue"
   href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
   href="http://example.com/css/pink.css">

然后使用 Javascript 对其进行更改：

<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>

switch_style() 函数是在该教程中编写的。

你甚至不需要任何 Javascript：

input[type=radio][value=light]:checked ~ article {
    color: #222;
    background-color: #FFEEAA;
}

input[type=radio][value=dark]:checked ~ article {
    color: #EEE;
    background-color: grey;
}
<body>
  <input type="radio" name="theme" value="light" checked="checked">Light<br>
  <input type="radio" name="theme" value="dark">Dark<br>
  <article>
    <h1>My super page!</h1>
    <p>
      Quibusdam sit repudiandae consequuntur doloremque illum ut ex quo. Esse temporibus est id suscipit repellat. Distinctio voluptatem voluptates asperiores dolorem dolorem placeat corporis quae. Quaerat voluptatem magni dignissimos rerum distinctio odio id.
    </p>
  </article>
</body>

如果您想在主题之间来回切换，我建议对您的 javascript 使用以下内容：

var count = 0

document.getElementById('trigger').onclick = function () {
    count = count + 1;
    if (count%2!=0){
      document.getElementById('default').href = 'changeTheme.css';
    } else {
      document.getElementById('default').href = 'main.css';
    }
};

然后使用前面提到的标记

其它你可能感兴趣的问题
上一篇Blob 下载在 IE 中不起作用 下一篇在 Javascript 中，这个下划线是什么意思？