如何只使用 CSS 實現網站的暗黑模式切換详情 - 前端,ecmascript-6,javascript 王大冶日志

动态

详情

返回

如何只使用 CSS 實現網站的暗黑模式切換 - 动态详情

08:59 上午 · 11月 03 ,2025

CSS技巧與案例詳解
vue2與vue3技巧合集
VueUse源碼解讀

想讓你的網站從“明亮清新”切換到“暗黑酷炫”，而不依賴任何 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);
    }
}