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