尝试通过复选框更改变量时：选中主体元素的变量未更改。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Manager</title>
<link rel="stylesheet" href="card.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="--flex-center"> <!-- The changes are not applied to <body> tag -->
<input type="checkbox" id="inp-theme">
<label for="inp-theme" class="checkbox"></label>
<header>App Title</header>
<!-- Other elements-->
</body>
</html>
CSS：
:root {
--primary: black;
--secondary: white;
}
body {
background: var(--secondary);
}
header {
color: var(--primary);
background: var(--secondary);
}
.checkbox:checked ~ * {
--primary: black;
--secondary: white;
}
这适用于所有其他元素，但不适用于主体。我如何也可以改变身体的变量。使用js是最后一个选择，但是任何人都可以帮助我使用css。因此，根据代码，当复选框选中时，元素的背景和颜色应该改变，但 的背景没有改变。
更改后的 css 自定义属性仅在其自己的上下文中起作用，而不是在父上下文中起作用。
:root {
--primary: black;
}
.outer,
.inner {
background-color: var(--primary, black);
}
.foo {
width: 100px;
height: 100px;
background: var(--primary);
border: 1px solid #ddd;
}
p {
padding: .5rem;
color: #ddd
}
label {
color: var(--primary);
}
.checkbox:checked ~ * {
--primary: rebeccapurple;
}<div class="outer">
<p>this wont change</p>
<div class="inner">
<input type="checkbox" id="inp-theme" class="checkbox">
<div class="foo">
<p>this will change</p>
</div>
</div>
</div>如果你想全局改变css自定义属性，你必须使用javascript
document.documentElement.style.setProperty('--primary', 'lime');