插入/刪除深色主題樣式表切換按鈕

Question

我試圖使這種暗模式開關在head插入樣式表，並在單擊時插入本地存儲。 它應該在第二次單擊時將其禁用，但是問題是在第一次單擊時我得到了on輸出，但是從第二次單擊起它就一直保持永遠off 。

如果頁面已經在運行深色主題，我還希望它具有其他條件，該開關將禁用插入的樣式表，並保持像這樣循環播放。

我願意擁有一個PHP替代方案。

$(function() {
    var linkDarkMode;
    $(".dark-theme").click(function() {
        if (!linkDarkMode) {
            linkDarkMode = $('<link rel="stylesheet" type="text/css" href="<?= get_template_directory_uri(); ?>/body/dark-theme.css">').appendTo('head')[0];
            localStorage.setItem("theme", "dark");
            console.log("on");
        } else {
            linkDarkMode.disabled = !linkDarkMode.disabled;
            localStorage.removeItem("theme");
            console.log("off");
        }
    });
});

Answer 1

第一次單擊后， linkDarkMode將保留該值，因此，每個后續單擊處理程序調用將進入else塊， if檢查失敗。 只需使用另一個像isThemeDark這樣的布爾值isThemeDark保持當前主題的狀態，然后執行此操作

$(function() {
    var linkDarkMode;
    var isThemeDark = false;
    $(".dark-theme").click(function() {
        if (!linkDarkMode) {
            linkDarkMode = $(
                '<link rel="stylesheet" type="text/css" href="<?= get_template_directory_uri(); ?>/body/dark-theme.css">'
            ).appendTo("head")[0];
            localStorage.setItem("theme", "dark");
            console.log("on");
        } else {
            if (isThemeDark) {
                linkDarkMode.disabled = true;
                localStorage.removeItem("theme");
                console.log("off");
            } else {
                linkDarkMode.disabled = false;
                localStorage.setItem("theme", "dark");
                console.log("on");
            }
            isThemeDark = !isThemeDark;
        }
    });
});

希望這可以幫助 ！