时间戳

首页 > 解决方案 > CSS中的主题是如何实现的

html - CSS中的主题是如何实现的

问题描述

我目前正在使用变量来跟踪浅色和深色主题的颜色（例如--light-background-color，--dark-background-color）。这对于两个主题并不太难，但似乎有点手动，如果面对更多主题，它变得不切实际。

我见过像夜班这样应用 CSS 过滤器的东西，它会反转网页上的颜色。这些过滤器如何工作？我将如何实施它们？

标签： htmlcssthemesfiltering

解决方案

解决此问题的一种方法是拥有一组通用主题颜色变量，而不是像您在此处尝试执行的特定主题的特定颜色变量。您可以在元素中定义这些变量，body并使用类或 body 的自定义属性覆盖它们。

像通常用于其他 HTML 元素一样使用这些变量，只需更改元素的属性body以应用不同的主题。

这里的重要部分是确保您的主题颜色变量也具有相应的对比色变量，以便像深色背景上的白色文本这样的东西可以交换为白色背景上的深色文本。

这是一个示例，其中主要和次要主题以及对比色在 body 元素中定义，并在 body 应用了“dark”类时被覆盖：

document.querySelector("button").addEventListener("click", () => document.body.classList.toggle("dark"));
body {
  --color-primary: #b4e9ce;
  --color-primary-contrast: #000000;
  --color-secondary: #308d43;
  --color-secondary-contrast: #ffffff;
  /* Other theme colors... */
}

body.dark {
  --color-primary: #202d26;
  --color-primary-contrast: #ffffff;
  --color-secondary: #8f8f8f;
  --color-secondary-contrast: #000000;
  /* Other theme colors... */
}

button {
  padding: 10px;
  margin-bottom: 20px;
}

.wrapper {
  padding: 20px;
  background-color: var(--color-primary);
  border: solid var(--color-secondary) 10px;
}

.wrapper h1 {
  font-family: sans-serif;
  text-align: center;
  color: var(--color-primary-contrast);
}
<body>

  <button>Toggle Theme</button>

  <div class="wrapper">
    <h1>Hello World</h1>
  </div>

</body>

推荐阅读