如何解决如何仅使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。