纯HTML/CSS/JS网页切换页面时深色主题先显浅色的问题及解决

我用纯HTML、CSS和JavaScript开发网页应用，实现了深浅主题切换功能，通过localStorage保存当前主题状态，切换页面时保持主题。但遇到问题：切换页面时，若当前为深色主题，会先显示浅色主题，再立即切换为深色主题，出现明显闪烁。

初始代码 #

HTML结构 #

<html>
     <body class="tema-claro">
     ..........
     <div class="salir">
        <button onclick="salir()">Salir</button>
    </div>
    </body>
    <script src=app.js type="text/javascript"></script>
</html>

JavaScript代码 #

"use strict";
Aplica_Estado_Inicial();

function Cambia_Tema() {
    let tTema;
    const cambiador = document.querySelector('.tema-visual');
    document.body.classList.toggle('tema-claro');
    document.body.classList.toggle('tema-oscuro');
    document.body.style.transition = "1s ease";
    localStorage.setItem("tema", document.getElementsByTagName("body")[0].className);
    const className = document.body.className;
    if(className == 'tema-claro') {
        tTema = 'Oscuro';
    }
    else if(className == 'tema-oscuro') {
        tTema = 'Claro';
    }
    document.getElementById("temVis").innerHTML = tTema;
    localStorage.setItem("textoTema", tTema);
    console.log(localStorage.getItem("textoTema"));
}

function Salir() {
.
.
.
}

function Aplica_Estado_Inicial() {
    if(localStorage.getItem("primeraCarga") === undefined) {
        localStorage.setItem("primeraCarga", true);
        document.body.className = "tema-claro";
        document.getElementById("temVis") = Oscuro;
    }
    if(!(localStorage.tema === undefined)) {
        document.body.className = localStorage.getItem("tema");
        document.getElementById("temVis").innerHTML = 
        localStorage.getItem("textoTema");
    }
}

CSS主题定义 #

.tema-oscuro {
    --body-color: #161719;
    --grad-uno-color: #4d4d51;
    --grad-dos-color: #000101;
    --primary-color-light: #f6f5ff;
}

.tema-claro {
    --body-color: #e6e6d9;
    --grad-uno-color: #bbbbbb;
    --grad-dos-color: #4d4d51;
    --primary-color-light: #1e2027; 
}

我尝试过修改Aplica_Estado_Inicial()添加首次加载标记，以及绑定body的onload事件调用该函数，但均未解决闪烁问题。

解决方法（更新 11/01 15:10） #

通过以下修改彻底解决了页面加载闪烁问题：

• 移除JS文件中Aplica_Estado_Inicial()的调用，改用事件监听器绑定按钮点击事件
• 移除HTML中的onclick事件，为按钮添加唯一ID
• 在body标签后立即插入script标签，优先读取localStorage中的主题值并设置body的类

修改后的HTML #

<body class="tema-claro">
    <script>
        if(!(localStorage.getItem("tema") == null)) {
            document.body.classList = localStorage.tema;
        }
    </script>
    ....
    <div>
    .....
    </div>
    <div class="salir">
        <button id="bloquearSistema">Salir</button>
    </div>
</body>
<script src="app.js" type="text/javascript"></script>
<noscript>Debe habilitar Javascript para ver el sitio completo</noscript>

修改后的JavaScript #

"use strict";

var estados = document.getElementById("temVis");
estados.addEventListener("click", function() {
    let tTema;
    const cambiador = document.querySelector('.tema-visual');
    document.body.classList.toggle('tema-claro');
    document.body.classList.toggle('tema-oscuro');
    document.body.style.transition = "1s ease";
    localStorage.setItem("tema", document.getElementsByTagName("body")[0].className);
    const className = document.body.className;
    if(className == 'tema-claro') {
        tTema = 'Oscuro';
    }
    else if(className == 'tema-oscuro') {
        tTema = 'Claro';
    }
    document.getElementById("temVis").innerHTML = tTema;
    localStorage.setItem("textoTema", tTema);
    console.log(localStorage.getItem("textoTema"));
});

var bloqueado = document.getElementById("bloquearSistema");
bloqueado.addEventListener("click", function() {
    var sHTTP = new XMLHttpRequest();
    sHTTP.open("GET", "no-permitido", true);
    sHTTP.send();
    setTimeout(function(){window.open("autenticar.html", "_self");}, 1000);    
});

修改后页面加载时不会再出现浅色主题闪烁的情况。

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