嘿！因此，如果您像我一樣並且喜歡整個黑暗模式氛圍，您可能會考慮將其添加到您的網站中。只需一點 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，該過程非常相似，但您將在組件內處理事情。操作方法如下：
- 設定深色模式的狀態和 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 函數可開啟和關閉深色模式。
- 深色模式 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;
}
登入後複製
- 本地儲存：
如果您希望主題偏好持續存在，您可以加入這個小調整：
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中文網其他相關文章！
