无需JavaScript 如何通过勾选复选框切换网站明暗主题配色

现有代码无法生效的核心原因 #

• 选择器逻辑不成立：你使用的+相邻兄弟选择器无法选中父级的:root节点，复选框作为body内的子元素，和根节点不存在兄弟关系，对应样式永远不会触发
• 选择器书写错误：媒体查询中误将id选择器写为类选择器（.theme-toggle-dark 应为 #theme-toggle-dark）
• 双checkbox无互斥逻辑：两个独立复选框没有关联，会出现同时选中的异常状态
• 明暗主题变量值重复：当前你定义的dark和light主题变量完全一致，即使切换也看不出效果，测试前需要先调整为对应主题的色值

具体修改方案 #

1. 调整HTML结构 #

将主题切换控件移到body最顶层，用自带互斥逻辑的单选按钮替代复选框，所有页面内容套入统一容器：

<body>
<!-- 主题切换单选框放在body最开头 -->
<input id="theme-toggle-dark" name="theme-toggle" type="radio" />
<input id="theme-toggle-light" name="theme-toggle" type="radio" />

<div id="theme-toggle-wrap">
    <label for="theme-toggle-dark" id="checkmark-dark">切深色</label>
    <label for="theme-toggle-light" id="checkmark-light">切浅色</label>
</div>

<!-- 你的网站所有原有内容都套入该容器 -->
<div id="page-container">
    <!-- 网站原有内容 -->
</div>
</body>

2. 调整SCSS代码 #

@mixin dark-theme {
    --body-color:           #121212;
    --text-color:           #FFFFFF;
    --title-color:          #FFFFFF;
    --subtitle-color:       #AAAAAA;
    --logo-color:           #FFFFFF;
    --link-color:           #8AB4F8;
    --link-visited-color:   #C58AF9;
    --quote-color:          #CCCCCC;
    --code-background-color:#2D2D2D;
    --text-highlight-color: #424242;
    --separator-color:      #333333;
}

@mixin light-theme {
    --body-color:           #FFFFFF;
    --text-color:           #121212;
    --title-color:          #000000;
    --subtitle-color:       #666666;
    --logo-color:           #000000;
    --link-color:           #1967D2;
    --link-visited-color:   #7B1FA2;
    --quote-color:          #444444;
    --code-background-color:#F5F5F5;
    --text-highlight-color: #E8F0FE;
    --separator-color:      #E0E0E0;
}

/* 页面容器默认加载浅色主题 */
#page-container {
    @include light-theme;
    background: var(--body-color);
    color: var(--text-color);
    min-height: 100vh;
}

/* 隐藏原生单选框 */
[name="theme-toggle"] {
    display: none;
}

/* 系统深色模式默认逻辑 */
@media (prefers-color-scheme: dark) {
    #page-container {
        @include dark-theme;
    }
    #checkmark-light {
        display: inline-block;
    }
    #checkmark-dark {
        display: none;
    }
}

/* 系统浅色模式默认逻辑 */
@media (prefers-color-scheme: light) {
    #page-container {
        @include light-theme;
    }
    #checkmark-dark {
        display: inline-block;
    }
    #checkmark-light {
        display: none;
    }
}

/* 手动切换深色主题 */
#theme-toggle-dark:checked ~ #page-container {
    @include dark-theme;
}
#theme-toggle-dark:checked ~ #theme-toggle-wrap #checkmark-dark {
    display: none;
}
#theme-toggle-dark:checked ~ #theme-toggle-wrap #checkmark-light {
    display: inline-block;
}

/* 手动切换浅色主题 */
#theme-toggle-light:checked ~ #page-container {
    @include light-theme;
}
#theme-toggle-light:checked ~ #theme-toggle-wrap #checkmark-light {
    display: none;
}
#theme-toggle-light:checked ~ #theme-toggle-wrap #checkmark-dark {
    display: inline-block;
}

注意：纯CSS实现的方案不支持刷新后保留用户手动选择的主题，需要持久化配置的场景还是需要配合JS操作localStorage实现。

内容的提问来源于stack exchange，提问作者Jan Černý