讓您的網站在幾分鐘內準備好深色模式

超過 80% 的用戶希望在應用程式中使用深色模式，現在是在 Web 應用程式中實現它的最佳時機......

但別擔心 - 您不需要做太多事情來重寫 CSS 或經歷各種艱苦的學習過程。

我將與您分享如何在不到 15 分鐘的時間內為您的網站添加深色模式支援（是的，確實如此）。

在本教程結束時，您應該能夠擁有一個優雅的深色模式，該模式可以感知系統並給您的用戶留下深刻的印象。

了解系統級深色模式

近年來黑暗模式令人印象深刻的一點是，您不必從頭開始創建複雜的主題切換器。

現代作業系統已經滿足了使用者的需求，瀏覽器透過 CSS 使這些需求變得簡單。

這裡的魔力是透過名為「prefers-color-scheme」的媒體查詢而發生的。看起來像這樣：

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

因此，每當使用者啟動系統上可怕的黑暗模式開關時，預設此媒體查詢就會啟動。

這可以讓您的網站風格根據使用者的偏好自動調整。

好的一點是大多數現代瀏覽器都支援這種開箱即用的功能。我們正在談論 Chrome、Firefox、Safari、Edge – 它們都在船上......

這表示您可以利用系統級首選項，而無需任何額外的 JavaScript 或複雜的邏輯。

讓我們開始有趣的部分 - 在您的程式碼中實際實現它。

快速實施方法

讓我們直接開始 - 您需要做的第一件事是在 CSS 中設定顏色變數。方法如下：

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

現在您將使用這些變量，而不是對顏色進行硬編碼。像這樣：

body {
  background-color: var(--background);
  color: var(--text);
}

.card {
  background-color: var(--surface);
}

.button {
  background-color: var(--accent);
}

確實是這樣！您的網站現在將根據您的使用者係統偏好自動在淺色和深色模式之間切換。不需要 JavaScript，沒有混亂的邏輯 – 乾淨簡單的 CSS。

快速提示：從基本顏色開始，然後根據您的品牌進行調整。一開始不要太擔心，稍後您可以隨時回來調整。

進階技巧

使用上述程式碼，您的網站應該可以完美運行，但讓我們添加一些額外的修飾，使您的深色模式實現真正專業。

這些調整隻需要幾分鐘，但卻會產生巨大的變化：

首先，加入平滑過渡，這樣模式切換就不會刺耳：

:root {
  --background: #ffffff;
  --text: #333333;
  /* Add this line */
  transition: background-color 0.3s ease, color 0.3s ease;
}

對於圖像，尤其是徽標，請添加此媒體查詢以優雅地處理它們：

@media (prefers-color-scheme: dark) {
  img {
    /* Slightly dim non-essential images */
    opacity: 0.8;
  }

  /* But keep logos crisp */
  .logo {
    opacity: 1;
    filter: brightness(1.2);
  }
}

新增主題切換按鈕

讓我們為想要覆蓋系統首選項的使用者新增一個手動主題切換器。

這是完整的實作：

首先，為您的切換按鈕新增此 HTML：

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

這是讓這一切正常運作的 JavaScript：

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

此程式碼為您提供了一個可切換按鈕：

• 預設尊重使用者的系統偏好
• 將他們的手動偏好保存在 localStorage
• 頁面重新載入後仍然存在
• 根據目前主題顯示太陽/月亮圖示
• 模式之間平滑過渡

專業提示：隨意自訂圖示 - 您可以使用 SVG，甚至創建更精緻的開關設計。只需確保當前主題顯而易見！

結論

所以，你的網站現在有了一個完全可用的、經過專業設計的深色模式功能！

您擁有系統感知的主題、流暢的動畫、正確的圖像渲染，甚至還有一個漂亮的切換按鈕。

你不需要在第一天就讓一切都很完美，記住這一點。

進行赤裸裸的實施，推動它，並在您使用網站時和人們使用網站時進行更改。

即使深色模式未完全正常工作，您的用戶也會很高興收到它。

以上是讓您的網站在幾分鐘內準備好深色模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！