只需幾行 JavaScript 即可更改淺色和深色主題

好吧..牽涉到一點CSS？但它比我在網路上找到的答案要容易得多。

我想要實現什麼？
我試著用這個方法實現兩件事。

1. 我需要允許網站以使用者喜歡的方式載入（他們已經在作業系統中選擇主題的部分）
2. 但我也想允許它們在加載後在深色和淺色模式之間切換。

所以我們將有一個網站，它將載入使用者期望的主題，然後允許他們在需要時更改它。

第 1 步：建立用於切換的按鈕

<img class="mode" src="./img/moon.svg">

我使用一個圖像作為我的按鈕，其中有一個月亮的 svg 圖像。您可以新增您感覺可以在兩個選項之間切換的按鈕或複選框。

第 2 步：將顏色詳細資訊作為自訂屬性放入 CSS 中

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

好吧..所以在根中你會看到名為 color-scheme 的屬性，這將改變我們的遊戲規則。
正如您所看到的，它需要淺色或深色的值。我還創建了兩個類別 .light 和 .dark，將顏色方案的值設為深色或淺色。

第 3 步：為程式碼的各個部分加上顏色

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

現在，每當屬性需要顏色（例如背景、顏色屬性）時，您都可以使用名為 light-dark() 的函數。
此函數有兩個值，第一個值在顏色方案設定為淺色時使用，第二個值在顏色方案設定為深色時使用。

是的...這是2024年5月發布的功能。它相當新，但很快就會適配。截至撰寫本文時，它處於基線支援中。這是它的文檔

light-dark() - CSS：級聯樣式表 | light-dark() MDN

light-dark() CSS 函數可以為屬性設定兩種顏色- 透過偵測開發人員是否設定了淺色或深色配色方案或使用者是否請求淺色或深色主題返回兩種顏色選項之一-無需將主題顏色包含在偏好中-顏色方案媒體特徵查詢。 使用者可以透過作業系統設定（例如淺色或深色模式）或使用者代理設定來表明他們的顏色方案偏好。 light-dark() 函數能夠提供兩個顏色值，其中任何 都可以。值被接受。如果使用者的首選項設定為淺色或未設定首選項，則 light-dark() CSS 顏色函數傳回第一個值；如果使用者的首選項設為深色，則傳回第二個值。

開發者.mozilla.org

如果您使用此功能，CSS 將自動從作業系統偵測使用者首選項並將其設定為他們想要的顏色。
我們實現了第一個目標，網站將載入用戶作業系統中已經想要的顏色模式。

第 4 步：使用 Javascript 在深色模式和淺色模式之間切換

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

這裡，document.documentElement.style.colorScheme 其實指的是 CSS 中的 :root 元素。
由於我們已經在上一個步驟中實現了以用戶首選模式開啟網站，因此當單擊切換按鈕時，它會執行以下操作。

1. 它檢查 color-scheme 是否有任何值，如果沒有，則網站處於使用者首選模式，我們需要確定是深色還是淺色來更改模式。
2. 它使用window.matchMedia("(prefers-color-scheme:dark)").matches 來查找是否處於深色模式，如果處於深色模式，我們將color-scheme 更改為淺色，如果不是，我們將其更改為深色。
3. 下次他們點擊按鈕時，我們已經為顏色方案設定了值，因此我們只需在深色或淺色之間切換。

*PS：*這是我的第一篇文章，我仍然是網頁開發的初學者。但當我搜尋這個方法時，並沒有看到任何相關的貼文。如果您已經知道這一點，我很抱歉點擊誘餌您？我認為這篇文章將幫助我在每次開發新專案時記住這個過程。
如果您正在努力讓您的網站在舊瀏覽器上運行，那麼此方法絕對不適合您。在關於這篇文章的評論中告訴我。感謝您的閱讀。

以上是只需幾行 JavaScript 即可更改淺色和深色主題的詳細內容。更多資訊請關注PHP中文網其他相關文章！