如何仅使用 css 更改配色方案？答案

【问题标题】：How to change color scheme using css only?如何仅使用 css 更改配色方案？
【发布时间】：2021-08-15 11:09:04
【问题描述】：

嘿，谁能告诉我有什么方法可以更改网站内的配色方案。等等，我会用一些代码解释清楚。

@media (prefers-color-scheme: dark) {}

@media (prefers-color-scheme: light) {}

有什么方法可以通过使用 HTML 按钮将配色方案从浅色改为深色。

我搜索了整个互联网，但没有找到正确的答案。虽然我是 CSS 新手。所以请解决我的问题。

【问题讨论】：

prefers-color-scheme CSS 媒体功能用于检测用户是否请求了浅色或深色主题。您无法切换该特定首选项，但您可以忽略此首选项，只需制作一个在 CSS 类之间切换的按钮。

标签： html css color-scheme darkmode htmlbutton

【解决方案1】：

我没有完全理解你，但如果你想改变原色，只需使用 javascript 并在 html 按钮中添加 onclick

【讨论】：

【解决方案2】：

如果您使用 CSS 变量，您可以使用 JavaScript 更改它们，如下所示：

var usesDarkTheme = false;

function changeColorTheme() {
  const body = document.body;
  if (usesDarkTheme) {
    body.style.setProperty('--main-color', 'white');
    usesDarkTheme = false;
  } else {
    body.style.setProperty('--main-color', 'black');
    usesDarkTheme = true;
  }
}

body {
  --main-color: white;
}

.content {
  background-color: var(--main-color);
  width: 100px;
  height: 100px;
}

<div class="content"> </div>

<button onclick="changeColorTheme()">Change Color Theme</button>

【讨论】：