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

问题描述

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

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

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

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

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

解决方法

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

,

如果你使用 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>