如何輕鬆地將黑暗模式添加到您的網站

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

第 1 步：設定 HTML

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

<button id="dark-mode-toggle">Toggle Dark Mode</button>

此按鈕將觸發切換模式。

步驟 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 (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={toggleDarkMode}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   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 (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={() => setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   export default App;

這是發生的事情：

• 初始狀態： darkMode 的初始狀態是根據 localStorage 中儲存的值設定的。
• 效果掛鉤： useEffect 掛鉤會在暗模式變更時儲存目前主題首選項。

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

以上是如何輕鬆地將黑暗模式添加到您的網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！