如何只使用 CSS 實現網站的暗黑模式切換
作者：dev
通過僅僅幾行 CSS 代碼，你的網站現在可以根據用戶的系統設置自動切換明暗模式。無需 JavaScript，純粹依賴 CSS 的特性，讓頁面變得更智能，更貼合用戶習慣。
想讓你的網站從“明亮清新”切換到“暗黑酷炫”，而不依賴任何 JavaScript？沒問題！
僅用 CSS 就能完成這個任務，根據用戶設備的系統設置動態切換主題。本教程將教你如何實現一個可以隨系統設置自動切換明暗模式的網站，完全拋棄 JavaScript。
第一步：基礎 HTML 頁面結構
首先，我們需要一個簡單的 HTML 頁面來進行實踐，為后續的樣式處理打下基礎。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 實現暗黑模式 ??</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>歡迎來到暗黑模式的世界！</h1>
<p>本網站會根據設備主題自動切換模式。試著設置為暗黑模式，感受一下效果吧！</p>
</div>
</body>
</html>這是一個簡單的 HTML 頁面，現在我們用 CSS 為它賦予靈魂。
第二步：設置默認的明亮主題樣式
我們先在 styles.css 文件中定義明亮主題樣式，這是網站的默認樣式，適用于系統處于明亮模式時。
/* 默認明亮模式樣式 */
body {
background-color: #ffffff; /* 白色背景，清新干凈 */
color: #000000; /* 黑色文字，清晰易讀 */
font-family: Arial, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}樣式解析
- 背景與文字：白色背景配合黑色文字，經典又舒適的搭配。
- 平滑過渡：通過 transition 屬性，讓明暗模式切換更加流暢。
- 容器樣式：設置了居中、圓角和柔和的陰影，使頁面更加美觀。
第三步：通過 @media (prefers-color-scheme: dark) 添加暗黑模式
接下來，我們利用 CSS 的 @media 媒體查詢，根據系統是否開啟暗黑模式切換樣式。
/* 暗黑模式樣式 */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212; /* 深灰背景，低調且不刺眼 */
color: #e0e0e0; /* 柔和的白色文字，避免高對比度 */
}
.container {
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); /* 更柔和的陰影 */
}
}樣式解析
- 媒體查詢：@media (prefers-color-scheme: dark) 會檢測用戶系統是否設置為暗黑模式。
- 暗黑主題：采用深灰背景和柔和的淺灰文字，避免刺眼的純黑與純白對比。
- 容器陰影：將陰影顏色調整為淺色，更貼合暗黑背景的視覺效果。
第四步：顯式定義明亮模式（可選）
雖然明亮模式是默認樣式，但你也可以顯式定義它，這在需要覆蓋某些樣式時非常有用。
/* 明亮模式樣式 */
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #000000;
}
.container {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
}第五步：完整 CSS 樣式
以下是最終整合后的完整樣式文件：
/* 默認明亮模式樣式 */
body {
background-color: #ffffff;
color: #000000;
font-family: Arial, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* 暗黑模式樣式 */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
.container {
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}
}
/* 明亮模式樣式 */
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #000000;
}
.container {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
}總結：純 CSS 的強大之處
通過僅僅幾行 CSS 代碼，你的網站現在可以根據用戶的系統設置自動切換明暗模式。無需 JavaScript，純粹依賴 CSS 的特性，讓頁面變得更智能，更貼合用戶習慣。
這個方法不僅提升了用戶體驗，還減少了頁面加載的復雜度和資源消耗?，F在，你可以自信地為用戶提供一個現代、靈活的主題切換體驗。
責任編輯：武曉燕
來源：
大遷世界
