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

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

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

成果展示

如果要測試,也可以直接開啟 Chrome 開發者工具,按下「shift + command + P」(Windows 按 「shift + ctrl + P」),輸入 CSS prefers-color-scheme,就可以直接選擇切換深色模式及淺色模式。

結語

在實作深色模式和淺色模式的切換功能時,並不困難。真正的難點在於如何進行配色,以便在兩種模式下都能有最佳的顯示效果,並且需要考慮到圖片的處理,有些網頁在切換模式時使用不同的圖片來展示,而比較簡易的方式就是用 CSS 將圖片調暗或調亮。

關於設計配色方案,可以參考以下連結: