javascript - 刷新网站时的暗模式延迟

Question

我为我的论坛开发了暗模式，但是当我设置暗模式，并首先更改选项卡或刷新页面时，会出现正常模式(或亮模式)，并在几毫秒内最终加载 g1进入body类属性，有什么办法可以消除延迟吗？

document.addEventListener('DOMContentLoaded', (event) => { 
 ((localStorage.getItem('mode') || 'g1') === 'g1') ? document.querySelector('body').classList.add('g1') : document.querySelector('body').classList.remove('g1') 
}) 

:root {/* Base principal */
--base1: #FFF;
--base2: #FAFAFA;
--base3: #F9F9F9;
--base4: #F7F7F7;
--base5: #F5F5F5;
--base6: #F0F0F0;
--base7: #EDEDED;
--borde1: #D3D3D3;
--borde2: rgba(0, 0, 0, 0.3);
--opacity1: rgba(249, 249, 249, 0.8);
--opacity2: rgba(0, 0, 0, 0.2);
--opacity3: rgba(255, 189, 149, 0.5);
--bg: url(https://i.imgur.com/E6Gmd5W.png);
--buscar: url(https://i.imgur.com/e1LpRR1.png);
--font1: #8C8C8C;
--font2: #FFF;
--sombra1: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
--sombra2: 1px 1px 0 rgba(0, 0, 0, 0.2), 1px -1px 0 rgba(0, 0, 0, 0.2), -1px 1px 0 rgba(0, 0, 0, 0.2), -1px -1px 0 rgba(0, 0, 0, 0.2);
--colorp: #EC7209;
--colorp1: 255, 118, 0;}

.g1 {--base1: #111; --base2: #1C1C1C; --base3: #141414; --base4: #141414; --base5: #1C1C1C; --base6: #161616; --base7: #202020; --borde1: #000; --bg: url(https://i.imgur.com/1ehFdwl.png); --buscar: url(https://i.imgur.com/xqY0yy2.png); --sombra1: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; --colorp: #9E500C; --colorp1: 255, 118, 0; --opacity1: rgba(30, 30, 30, 0.6); --font2: #ECECEC}

.container {margin: 140px auto 0; width: 1000px; border: 20px solid var(--base4); outline: 1px solid var(--borde1); padding: 0; background: var(--base4)}

<div class="container"></div>
<a style="cursor: pointer" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'g1') === 'g1' ? 'bright' : 'g1'); localStorage.getItem('mode') === 'g1' ? document.querySelector('body').classList.add('g1') : document.querySelector('body').classList.remove('g1')">light/dark theme</a>

Answer 1

我遇到了同样的问题。只需将主题存储在 cookie 中，在服务器端您可以使用 $_COOKIE['...']

检查 cookie