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中文网其他相关文章！