网站刷新时的暗模式延迟

Question

我为我的论坛开发了一个暗模式，但是当我设置暗模式并首先更改选项卡或刷新页面时，正常模式（或亮模式）出现，并在几毫秒内最终将 g1 加载到正文中class属性，有什么办法可以消除延迟？

 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