时间戳

首页 > 解决方案 > 如何通过 CSS 更改 Web 应用程序的颜色主题？

html - 如何通过 CSS 更改 Web 应用程序的颜色主题？

问题描述

我希望我的网络应用程序的主题能够根据设置自动更改。

目前，我正在使用这样的 jQuery 进行操作：

if (background == 'dark') {
  $('#graph-container').addClass('graph-dark');
  $('#analyticsbutton').addClass('analyticsbutton-dark');
}

但是，我想知道最好的做法是简单地使用修改后的类创建另一个 CSS 文件并根据background参数加载它？

标签： htmlcss

解决方案

最简单的方法是使用:root选择器和自定义 css 变量。选择:root器允许您定位 DOM 或文档树中最高级别的“父”元素。

然后，您可以简单.dark地动态添加一个类来更改主题。

:root {
  --light-text-color: black;
  --light-bg-color: white;
  --dark-text-color: white;
  --dark-bg-color: black;
}

div{
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  
}

div { 
  color: var(--light-text-color); 
  background: var(--light-bg-color);
  border: 1px solid black;
}

:root .dark { 
  color: var(--dark-text-color); 
  background: var(--dark-bg-color);
}
<div>Light Theme</div>


<div class="dark">Dark Theme</div>

推荐阅读