<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
}
:root {
--green: green;
--orange: orange;
--green-bg: #c7edcc;
--orange-bg: #222222;
}
.theme-green {
color: var(--green);
background-color: var(--green-bg);
}
.theme-orange {
color: var(--orange);
background-color: var(--orange-bg);
}
</style>
</head>
<body class="theme-orange asd">
<div>
<span>文案颜色</span>
<input type="color" id="color" />
</div>
<div>
<span>背景颜色</span>
<input type="color" id="bgColor" />
</div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>VUE</li>
</ul>
<script>
const body = document.querySelector("body");
const fontColor = document.querySelector("#color");
const bgColor = document.querySelector("#bgColor");
fontColor.addEventListener("change", (ev) => {
document.documentElement.style.setProperty("--orange", ev.target.value);
});
bgColor.addEventListener("change", (ev) => {
document.documentElement.style.setProperty(
"--orange-bg",
ev.target.value
);
});
</script>
</body>
</html>
标签：主题,--,javascript,orange,bg,green,变色,document,color From： https://www.cnblogs.com/fmg0224/p/16771172.html