嘿！因此，如果您像我一樣並且喜歡整個黑暗模式氛圍，您可能會考慮將其添加到您的網站中。只需一點 CSS 和 JavaScript 即可輕鬆設定。我是這樣做的。

第 1 步：設定 HTML

首先，您需要一個按鈕或開關，使用者可以單擊該按鈕或開關在淺色和深色模式之間切換。我在這個例子中使用了一個簡單的按鈕（如果需要，您可以使用圖示）：

Toggle Dark Mode

此按鈕將觸發切換模式。

步驟 2： 新增淺色和深色模式的 CSS

接下來，您需要定義淺色模式和深色模式的外觀。在 CSS 中，您將設定預設樣式（這將是您的淺色模式），然後新增一個覆蓋這些樣式的深色模式類別。

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

這是發生的事情：

• 燈光模式（預設）： 正文為白色背景和黑色文字。我添加了一個過渡，以使在模式之間切換時的變化平滑。
• 深色模式： .dark-mode 類別將背景變更為深灰色，將文字變更為白色。

第 3 步：使用 JavaScript 在模式之間切換

現在是我們讓按鈕實際執行某些操作的部分。每當點擊按鈕時，這段 JavaScript 就會切換主體上的 .dark-mode 類別。

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

這是一個細分：

• 切換類別： 當按一下按鈕時，我們在主體上切換 .dark-mode 類別。這會改變淺色和深色模式之間的樣式。
• 保存首選項：我透過將用戶的首選項保存在 localStorage 中添加了一些額外內容。這意味著如果他們選擇深色模式，即使他們離開並返回網站，它也會保持這種狀態。

第 4 步：在頁面載入時載入使用者首選項

為了確保網站以使用者喜歡的模式加載，您需要在頁面加載時檢查 localStorage 並相應地設定模式。

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

如果您使用 React，該過程非常相似，但您將在元件內處理事情。操作方法如下：

1. 設定深色模式的狀態和 CSS 類別：

使用 React 的 useState 來管理暗模式狀態，並將適當的類別應用到您的根元素：

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           

               
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

在此範例中：

• darkMode 狀態決定深色模式是否處於活動狀態。
• toggleDarkMode 函數可開啟和關閉深色模式。

1. 深色模式 CSS：

將 .dark-mode 類別加入您的 CSS 中，就像以前一樣：

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. 本地儲存：

如果您希望主題偏好持續存在，您可以添加這個小調整：

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           

                setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

這是發生的事情：

• 初始狀態： darkMode 的初始狀態是根據 localStorage 中儲存的值設定的。
• Effect Hook： 只要 darkMode 發生變化，useEffect hook 就會保存目前的主題首選項。

就是這樣！這是一種向 React 應用程式添加暗模式的更簡單方法，不會讓事情變得過於複雜。