无法通过checkbox:checked修改body元素的CSS自定义变量切换主题

原因分析 #

你的CSS选择器.checkbox:checked ~ *只能选中checkbox的同级后续元素，但<body>是checkbox的父元素，CSS没有父选择器，所以无法通过这个选择器修改body上的变量。而<header>等元素是checkbox的同级，能被选中，因此变量可以正常生效。

解决方案（纯CSS） #

方案1：调整HTML结构，将checkbox设为body的同级元素 #

把checkbox和label移到<body>标签之前，作为<html>的直接子元素，这样就能用兄弟选择器选中body并修改变量：

修改后的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>

<input type="checkbox" id="inp-theme">
<label for="inp-theme" class="checkbox"></label>

<body class="--flex-center">
    <header>App Title</header>
    <!-- 其他元素-->
</body>
</html>

修改后的CSS（修正主题切换的变量值，示例为亮色转暗色）：

:root {
    --primary: black;
    --secondary: white;
}

body {
    background: var(--secondary);
}

header {
    color: var(--primary);
    background: var(--secondary);
}

#inp-theme:checked ~ body {
    --primary: white;
    --secondary: black;
}

方案2：使用:has()伪类（无需调整HTML结构） #

如果不想改动HTML，可以利用CSS的:has()伪类，检测body内部的checkbox是否被选中，直接修改body的变量（注意：该伪类需要现代浏览器支持，IE不兼容）：

修改后的CSS：

:root {
    --primary: black;
    --secondary: white;
}

body {
    background: var(--secondary);
}

header {
    color: var(--primary);
    background: var(--secondary);
}

body:has(#inp-theme:checked) {
    --primary: white;
    --secondary: black;
}

两种方案都能实现纯CSS切换主题，且body的背景色会随变量同步更新。

内容的提问来源于stack exchange，提问作者CodeMaven42