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

我是這樣做的。

第 1 步：設(shè)定 CSS

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

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

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

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

第 2 步：新增 HTML

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

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

<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 處理兩個(gè)關(guān)鍵任務(wù)：

1. 當(dāng)使用者點(diǎn)擊圖示時(shí)在明暗模式之間切換。
2. 將使用者的主題偏好儲(chǔ)存在 localStorage 中，以便在將來存取時(shí)自動(dòng)載入。

JavaScript 分為兩部分：

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

將程式碼加入

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

JavaScript 程式碼

此程式碼從本機(jī)儲(chǔ)存中檢索先前儲(chǔ)存的主題（如果有）。否則，它會(huì)檢查使用者的瀏覽器或作業(yè)系統(tǒng)是否喜歡淺色或深色主題。如果該資訊不可用，則預(yù)設(shè)為深色模式。然後，它將該模式應(yī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ù)先前在

中設(shè)定的preferredScheme 變數(shù)顯示正確的圖示。 switchMode() 函數(shù)更新圖示顯示，變更 :root 配色方案，並將新首選項(xiàng)儲(chǔ)存在本機(jī)儲(chǔ)存中：

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 部落格上的淺色/深色模式逐步指南的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！