ASP.NET Core 7 MVC页面统一暗黑模式配置求助

1. 利用Bootstrap原生暗黑模式快速全局切换 #

如果你的项目使用Bootstrap 5.3及以上版本，直接在_Layout.cshtml的<html>标签上添加data-bs-theme="dark"，就能让Bootstrap自动切换全局组件的暗黑样式（导航栏、卡片、表单等），无需逐个元素添加类：

<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="dark">
<!-- 其余原有头部、主体、尾部结构保持不变 -->
</html>

2. 自定义CSS覆盖未适配的局部样式 #

针对头部、footer这类复杂结构，以及自定义组件的未覆盖样式，在wwwroot/css/site.css中添加全局暗黑模式样式：

/* 全局body样式统一 */
body[data-bs-theme="dark"] {
    background-color: #121212;
    color: #ffffff;
}

/* 覆盖头部和footer的背景与文字色 */
body[data-bs-theme="dark"] header,
body[data-bs-theme="dark"] footer {
    background-color: #1e1e1e;
    color: #ffffff;
}

/* 确保头部footer内的子元素继承颜色 */
body[data-bs-theme="dark"] header *:not(a),
body[data-bs-theme="dark"] footer *:not(a) {
    color: inherit;
}

/* 调整链接颜色，适配暗黑模式 */
body[data-bs-theme="dark"] a {
    color: #8ab4f8;
}

body[data-bs-theme="dark"] a:hover {
    color: #b3d4fc;
}

/* 强制覆盖遗留的浅色背景类 */
body[data-bs-theme="dark"] .bg-white {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

3. 持久化主题设置（可选） #

如果需要用户切换主题后刷新页面仍保留设置，在_Layout.cshtml末尾添加切换按钮和脚本：

<!-- 可放在头部或合适位置的切换按钮 -->
<button onclick="toggleTheme()" class="btn btn-sm btn-outline-light">切换主题</button>

<script>
// 切换主题逻辑
function toggleTheme() {
    const htmlEl = document.documentElement;
    const currentTheme = htmlEl.getAttribute('data-bs-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    htmlEl.setAttribute('data-bs-theme', newTheme);
    localStorage.setItem('site-theme', newTheme);
}

// 页面加载时恢复保存的主题
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('site-theme') || 'dark';
    document.documentElement.setAttribute('data-bs-theme', savedTheme);
});
</script>

4. 验证与调试 #

• 确保Bootstrap版本≥5.3（若使用旧版Bootstrap，需改用CSS变量自定义暗黑模式，比如定义--bg-color: #121212等变量，全局替换）
• 清除浏览器缓存（Cmd+Shift+R），确保新样式生效
• 检查页面元素的样式优先级，若仍有未覆盖的部分，用浏览器开发者工具（F12）定位元素，补充对应的CSS规则

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