前言

今天的目標為修復我在主題切換功能中遇到的 bug。當我在完成主題切換功能後，測試時發現一個問題：如果我先切換當前的主題，然後再按下"自動切換背景"功能，會導致網站出現 bug。

比如說，我儲存的主題是自然主題，但我今天將主題切換為亮色主題，然後我開啟"自動切換背景"功能。這時，如果我再按一次"自動切換背景"功能關掉計時器，我發現我的網站主題會變回自然主題，而不是我按下"自動切換背景"之前的主題。

修復主題切換中的 bug

問題分析

我決定在本地存儲新增一個名為 temporaryTheme key 值，它的功用是存取我當前使用的主題，將它和保存設定中的主題做一個區分。這樣在我關閉"自動切換背景"功能時，網頁才會恢復到使用者之前選擇的主題，而不是我設定保存的主題。

修改程式碼

首先，我在 loadSettings() 方法中添加以下程式碼，在本地存儲中創建一個 temporaryTheme 變數，用於區分按下儲存功能後存入的主題和當前網站所選擇的主題：

this.temporaryTheme = this.nowTheme;
localStorage.setItem("temporaryTheme", this.temporaryTheme);

然後，在 changeTheme() 中添加以下程式碼，用來更新 temporaryTheme 變數的值，以便在每次變更主題後，都能更新本地存儲中的 temporaryTheme 變數：

this.temporaryTheme = themeName;
localStorage.setItem("temporaryTheme", this.temporaryTheme);

接下來是修改 toggleAutoSwitch() 方法，以確保在關閉"自動切換背景"這個功能後，網站的主題可以恢復為按下此功能前的主題。以下為程式碼：

this.nowTheme = localStorage.getItem("temporaryTheme");

最後是修改 checkTheme() 方法，這個方法要修改的地方是 else 內的程式碼。首先，我需要先取出本地存儲中 theme 和 temporaryTheme 的值，然後使用 if 條件句去比較兩者是否相等。若是它們不相等，我就使用 temporaryTheme 的值去設定主題。

let saveTheme = localStorage.getItem("theme");
let theme = localStorage.getItem("temporaryTheme");

if (saveTheme === theme) {
    newTheme = saveTheme;
} else {
    newTheme = theme;
}