Bear 部落格上的淺色/深色模式逐步指南

我最近使用偏好顏色方案媒體功能與 light-dark() 顏色函數相結合，在我的 Bear 博客上實現了亮/暗模式切換。

我是這樣做的。

第 1 步：設定 CSS

CSS 在過去幾年中獲得了一些很酷的新功能，包括 light-dark() 顏色函數。此功能可讓您為任何元素指定兩種顏色 - 一種用於淺色模式，另一種用於深色模式。

例如，如果您希望背景在淺色模式下為白色，在深色模式下為黑色，則設定方法如下：

body {
  background-color: light-dark(#fff, #000);
}

我將這種方法應用於淺色和深色模式下具有不同顏色需求的所有元素。

第 2 步：新增 HTML

對於主題切換，我使用了單個圖標，而不是開關、單選按鈕或下拉式選單。頁面載入時僅顯示用於切換到相反模式的圖示 - 由於我的預設主題是深色，因此深色模式圖示最初是隱藏的，而切換到淺色模式的圖示是可見的。

onclick 事件呼叫 switchMode() 函數，該函數處理淺色和深色主題之間的切換（稍後會詳細介紹）。這是 HTML 設定：

<a id="preferdark" onclick="switchMode('dark')" style="display: none;">
  <!-- Icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchMode('light')">
  <!-- Icon for switching to light mode. -->
</a>

第 3 步：建立 JavaScript

JavaScript 處理兩個關鍵任務：

1. 當使用者點擊圖示時在明暗模式之間切換。
2. 將使用者的主題偏好儲存在 localStorage 中，以便在將來存取時自動載入。

JavaScript 分為兩部分：

中的程式碼和在頁面載入時設定主題並在 中設定程式碼在頁面完全載入後更新元素。

將程式碼加入

中和 在熊掌記上，前往設定>；頁首和頁尾指令.

JavaScript 程式碼

此程式碼從本機儲存中檢索先前儲存的主題（如果有）。否則，它會檢查使用者的瀏覽器或作業系統是否喜歡淺色或深色主題。如果該資訊不可用，則預設為深色模式。然後，它將該模式應用於 :root 元素（即基本元素）：

const storedScheme = localStorage.getItem("color-scheme");
const preferredScheme = storedScheme 
  ? storedScheme 
  : window && 
    window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";

document.querySelector(':root').style.setProperty("color-scheme", preferredScheme);

JavaScript 程式碼

此程式碼根據先前在

中設定的preferredScheme 變數顯示正確的圖示。 switchMode() 函數更新圖示顯示，變更 :root 配色方案，並將新首選項儲存在本機儲存中：

document.querySelector("#preferlight").style.display = preferredScheme === "light" 
  ? "none" 
  : "";
document.querySelector("#preferdark").style.display = preferredScheme === "light" 
  ? "" 
  : "none";

function switchMode(mode) {
  document.getElementById("preferlight").style.display = mode === "light" 
  ? "none" 
  : "";
  document.getElementById("preferdark").style.display = mode === "light" 
  ? "" 
  : "none";
  document.querySelector(':root').style.setProperty("color-scheme", mode);
  localStorage.setItem("color-scheme", mode);
}

就是這樣－為您的熊掌記部落格提供亮/暗模式切換！

以上是Bear 部落格上的淺色/深色模式逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！