CSS 中的主题是如何实现的

Question

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

我看到过夜班之类的应用 CSS 滤镜来反转网页上的颜色。这些过滤器如何工作？我将如何实施它们？

Answer 1

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

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

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

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

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>

Answer 2

单行 CSS 会将浅色主题更改为深色：

<style>
body
{
  filter: invert(1);
}
</style>

CSS 中的主题是如何实现的

How are themes implemented in CSS

html

css

themes

filtering