0

我正在使用暗模式代码。使用此代码，我想使用相应的图标在暗模式和亮模式之间切换。这完美地工作，但唯一的问题是页面加载时默认情况下不显示深色/浅色图标。如果我单击该图标，则只有它显示。如何在页面加载时使其默认显示。

这是我正在使用的代码：

  const switcher = document.querySelector("#switcher");
    switcher.setAttribute('src', '...LIGHT-MODE-1.png');

    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
    const currentTheme = localStorage.getItem('theme');
    if (currentTheme) {
        document.documentElement.setAttribute('data-theme', currentTheme);
        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
        }
    }

    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
            switcher.setAttribute('src', '...LIGHT-MODE-1.png');
        } else {
            document.documentElement.setAttribute('data-theme', 'light');
            localStorage.setItem('theme', 'light');
            switcher.setAttribute('src', '...DARK-MODE-1.png');
        }
    }
    toggleSwitch.addEventListener('change', switchTheme, false);
<!--The icon HTML-->


<label class="theme-switch" for="checkbox">
        <span title="Enable/disable Dark Mode"><img id="switcher" src=""></span>
        <input type="checkbox" id="checkbox" /></label>

感谢您的帮助和时间！

4

1 回答 1

1

您似乎错过了src第一次暗模式检查中的更改：

if (currentTheme === 'dark') {
    toggleSwitch.checked = true;
    switcher.setAttribute('src', '...DARK-MODE-1.png');
}

更新：我建议不要创建一个设置主题的函数，而不是所有重复的代码，然后您可以从任何地方调用它。这将允许您在初始加载时使用它，然后单击：

const switcher = document.querySelector('#switcher');
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);

    const src = '/path/to/images/' + (theme === 'light' ? 'LIGHT-MODE-1.png' : 'DARK-MODE-1.png');
    switcher.setAttribute('src', src);
}

const theme = localStorage.getItem('theme') || 'light';
setTheme(theme);

toggleSwitch.addEventListener('change', (e) => {
    const theme = e.currentTarget.checked ? 'dark' : 'light';
    setTheme(theme);
});

小提琴：https ://jsfiddle.net/fjzue6wa/1/

于 2021-03-17T08:33:48.227 回答