用于深色模式/浅色模式的 JS 功能，通过本地存储进行值检查，让我在进入子页面时可以快速更改颜色

Question

我想在我的网站上添加一个用于切换到暗模式和亮模式的按钮。

我在 CSS 中使用 var() 来控制元素的颜色。 这是我的代码：

function loadMode() {
    const mode = localStorage.getItem('mode');
    if (mode === 'dark') {
        setDarkMode();
    }
}

// set darkmode
function setDarkMode() {
    document.documentElement.style.setProperty('--textColor', '#eaeaea');
    document.documentElement.style.setProperty('--backgroundColor', '#333333');
    document.getElementById('toggleMode').textContent = 'Wechsel zu Lightmode';
    localStorage.setItem('mode', 'dark');
}

// set lightmode
function setLightMode() {
    document.documentElement.style.setProperty('--textColor', '#313131');
    document.documentElement.style.setProperty('--backgroundColor', '#e0e0e0');
    document.getElementById('toggleMode').textContent = 'Wechsel zu Darkmode';
    localStorage.setItem('mode', 'light');
}

// toggle the color mode
function toggleMode() {
    const isDarkMode = localStorage.getItem('mode') === 'dark';
    if (isDarkMode) {
        setLightMode();
    } else {
        setDarkMode();
    }
}

// event listener for button
document.getElementById('toggleMode').addEventListener('click', toggleMode);

// load mode on site load
loadMode();

此脚本加载在网页末尾（这就是问题所在，我知道，但我该如何解决它？） 现在我遇到的问题是，每次我进入子页面时，网站都会加载浅色，然后切换到深色，这会导致快速但非常烦人的颜色闪烁效果。

如何防止这种情况发生？我的网站是用 php 构建的，所以会话可以工作吗？还是饼干？

谢谢您的帮助！

我尝试将函数放在标题中，但主体元素无法接收颜色更改，因为我认为它未加载是（？）

Answer 1

我自己修好了：

将部分脚本放入：

<script>
    (function() {
        const mode = localStorage.getItem('mode');
        if (mode === 'dark') {
            document.documentElement.style.setProperty('--textColor', '#eaeaea');
            document.documentElement.style.setProperty('--backgroundColor', '#333333');
        } else {
            document.documentElement.style.setProperty('--textColor', '#313131');
            document.documentElement.style.setProperty('--backgroundColor', '#e0e0e0');
        }
    })();
</script>

并将其余代码放在正文的末尾：

<script>
function loadMode() {
    const mode = localStorage.getItem('mode');
    if (mode === 'dark') {
        setDarkMode();
    }
}

function setDarkMode() {
    document.documentElement.style.setProperty('--textColor', '#eaeaea');
    document.documentElement.style.setProperty('--backgroundColor', '#333333');
    document.getElementById('toggleMode').textContent = 'Wechsel zu Lightmode';
    localStorage.setItem('mode', 'dark');
}

function setLightMode() {
    document.documentElement.style.setProperty('--textColor', '#313131');
    document.documentElement.style.setProperty('--backgroundColor', '#e0e0e0');
    document.getElementById('toggleMode').textContent = 'Wechsel zu Darkmode';
    localStorage.setItem('mode', 'light');
}

function toggleMode() {
    const isDarkMode = localStorage.getItem('mode') === 'dark';
    if (isDarkMode) {
        setLightMode();
    } else {
        setDarkMode();
    }
}

document.getElementById('toggleMode').addEventListener('click', toggleMode);

// Load mode on page load
loadMode();