實作網頁深色模式及淺色模式的切換

深色模式在過去幾年變得非常流行，它是一種高對比度的顯示模式，能夠減少眼睛疲勞並降低耗電量。傳統的亮色界面，在低光環境下使用電子設備時，容易對眼睛造成不適。深色模式採用較暗的背景和較亮的文字和元素，減輕對眼睛的負擔，降低眼睛疲勞的風險。在本文中，我將向您展示如何讓您的網頁根據作業系統的設定，自動選擇配色方案，並且也會介紹手動切換配色方案的方法。

您可以先點擊下方連結觀看成果：

網頁深色模式及淺色模式的切換

使用 CSS 自動切換

在 CSS 中，可以使用 @media 的 prefers-color-scheme 來自動偵測系統目前是否處於深色模式或淺色模式，之後我們就可以根據不同的模式來設定不同的配色方案。

            
                body {
                    background: #fafafa;
                    color: #212121;
                }
                @media (prefers-color-scheme: light) {
                    body {
                        background: #fafafa;
                        color: #212121;
                    }
                }
                @media (prefers-color-scheme: dark) {
                    body {
                        background: #212121;
                        color: #fafafa;
                    }
                }

此方法只能根據系統設定來自動切換模式，但在大部分情況下，我們希望讓使用者可以自己在網頁中切換顯示模式，此時就需要改用 JavaScript 搭配 CSS 來實現這一功能，下一章節將繼續詳細介紹這個方法。

使用 JavaScript 手動切換

讓使用者手動切換顯示模式是更常見的方式，要實現這一功能有許多不同的方式，以下是我認為比較好的方法。

STEP 1

建立兩個 CSS 檔案，分別為 light-theme.css 和 dark-theme.css，並在 HTML 中引入，且將 dark-theme.css 設定為 disabled。
```
                    
                        <link rel="stylesheet" href="./light-theme.css">
                        <link rel="stylesheet" href="./dark-theme.css" id="darkTheme" disabled>
                    
                
```
所有的排版及預設配色都在 light-theme.css 中設定，而 dark-theme.css 是用來在深色模式時，覆蓋 light-theme.css 中的顏色設定。因此當啟動深色模式時，兩個檔案都會一起使用，而不是進行切換。

STEP 2

建立 setTheme 方法，用來設定顯示模式，並將目前的顯示模式儲存在 localStorage，這樣在重新整理網頁時，才能夠保留顯示模式的設定。

                    
                        function setTheme(theme) {
                            // 儲存顯示模式
                            localStorage.setItem('theme', theme);

                            // 切換顯示模式
                            // 如果為淺色模式，就將 dark-theme.css disabled 設定為 true
                            // 如果為深色模式，則將 dark-theme.css disabled 設定為 false
                            document.getElementById('darkTheme').disabled = (theme != 'dark');
                        }

STEP 3

建立 window.onload() 方法，在網頁載入時先檢查 localStorage 是否有顯示模式的資料，如果沒有，則抓取系統設定的顯示模式。

                    
                        window.addEventListener('load', (event) => {
                            let preferredTheme = localStorage.getItem('theme');
                            let darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
                            if (preferredTheme == null) {
                                preferredTheme = darkQuery.matches ? 'dark' : 'light';
                            }

                            // 監聽作業系統是否切換顯示模式
                            darkQuery.addListener(function (e) {
                                setTheme(e.matches ? 'dark' : 'light');
                            });

                            // 設定顯示模式
                            setTheme(preferredTheme);
                        })

STEP 4

最後，綁定按鈕事件，當使用者按下按鈕，便切換顯示模式。

                    
                        document.getElementById('btnSwitchTheme').addEventListener('click', () => {
                            let preferredTheme = localStorage.getItem('theme');
                            if (preferredTheme == 'dark') {
                                setTheme('light');
                            }
                            if (preferredTheme == 'light') {
                                setTheme('dark');
                            }
                        })