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');
}

更新:すべてのコードを複製する代わりに、テーマを設定する 1 つの関数を作成することをお勧めします。この関数は、どこからでも呼び出すことができます。これにより、初期ロード時とクリック時に使用できます。

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 に答える