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

我是這樣做的。

第 1 步：設置 CSS

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

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

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

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

第 2 步：添加 HTML

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

onclick 事件調(diào)用 switchMode() 函數(shù)，該函數(shù)處理淺色和深色主題之間的切換（稍后會詳細介紹）。這是 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 步：創(chuàng)建 JavaScript

JavaScript 處理兩個關鍵任務：

1. 當用戶單擊圖標時在明暗模式之間切換。
2. 將用戶的主題偏好存儲在 localStorage 中，以便在將來訪問時自動加載。

JavaScript 分為兩部分：

中的代碼和在頁面加載時設置主題并在 中設置代碼在頁面完全加載后更新元素。

將代碼添加到

中和 在熊掌記上，前往設置>；頁眉和頁腳指令.

<頭> JavaScript 代碼

此代碼從本地存儲中檢索以前保存的主題（如果有）。否則，它會檢查用戶的瀏覽器或操作系統(tǒng)是否喜歡淺色或深色主題。如果該信息不可用，則默認為深色模式。然后，它將該模式應用于 :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 代碼

此代碼根據(jù)之前在

中設置的preferredScheme 變量顯示正確的圖標。 switchMode() 函數(shù)更新圖標顯示，更改 :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 博客上的淺色/深色模式分步指南的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！