暗黑模式切换背景生效但flex容器内文本未变色问题求助

核心问题分析 #

1. JS逻辑错误：连续调用两次classList.toggle会导致图标类的状态判断混乱，无法准确切换明暗模式。
2. 样式优先级问题：直接修改body.style.color的优先级低于CSS文件中为h2/p/a等元素设置的独立颜色规则，导致这些元素无法继承body的颜色。
3. HTML结构错误：页面内容被放在</body>标签之后，浏览器会自动修正DOM结构，可能破坏样式继承链。

步骤1：修正JavaScript逻辑 #

改用给body添加/移除dark-mode类的方式管理模式，避免直接操作行内样式：

const toggle = document.getElementById('toggleDark');
const body = document.querySelector('body');

toggle.addEventListener('click', function(){
    // 切换图标样式
    this.classList.toggle('bi-moon');
    this.classList.toggle('bi-brightness-high-fill');
    // 切换body的深色模式类
    body.classList.toggle('dark-mode');
});

步骤2：在style.css中统一控制样式 #

通过CSS类来定义明暗模式的样式，确保所有文本元素都能被覆盖：

/* 浅色模式基础样式 */
body {
    background: white;
    color: black;
    transition: 2s;
}

/* 深色模式全局样式 */
body.dark-mode {
    background: black;
    color: white;
}

/* 强制覆盖所有文本元素的颜色 */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode p,
body.dark-mode a {
    color: white;
}

/* 可选：单独调整深色模式下链接的颜色 */
body.dark-mode a {
    color: #64b5f6;
}

步骤3：修复HTML结构错误 #

所有页面内容必须放在<body>标签内部：

<!DOCTYPE html>
<html lang="it">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8">
    <title>home site</title> 
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
</head>

<body>
    <div class="top-container">
        <span class="scrittaSu"><h1><span class="greg">GREG'S</span> PORTFOLIO</h1></span>
        <span class="scrittaGiu"><p>Home.</p></span>
    </div>

    <header> 
        <span><li><a class="active" href="http://127.0.0.1:5500/index.html" target="_blank">HOME</a></li></span>
        <li><a href="http://127.0.0.1:5500/portfolio.html" target="_blank">PORTFOLIO</a></li>
        <li><a href="http://127.0.0.1:5500/aboutme.html" target="_blank">ABOUT ME</a></li>
        <i class="bi bi-brightness-high-fill" id="toggleDark"></i>
    </header>

    <div class="flex-container"> 
        <div class="flex-left">
            <span class="contentTop"><h2>random text</h2></span><br>
            <span class="contentBottom"><p>random text<br>random text</p></span>
        </div>
    </div>
</body>
</html>

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