我最近使用偏好颜色方案媒体功能与 light-dark() 颜色函数相结合，在我的 bear 博客上实现了亮/暗模式切换。
我是这样做的。
第 1 步：设置 css
css 在过去几年中获得了一些很酷的新功能，包括 light-dark() 颜色函数。此功能可让您为任何元素指定两种颜色 - 一种用于浅色模式，另一种用于深色模式。
例如，如果您希望背景在浅色模式下为白色，在深色模式下为黑色，则设置方法如下：
body {
background-color: light-dark(#fff, #000);
}
我将这种方法应用于浅色和深色模式下具有不同颜色需求的所有元素。
第 2 步：添加 html
对于主题切换，我使用了单个图标，而不是开关、单选按钮或下拉菜单。页面加载时仅显示用于切换到相反模式的图标 - 由于我的默认主题是深色，因此深色模式图标最初是隐藏的，而切换到浅色模式的图标是可见的。
onclick 事件调用 switch mode() 函数，该函数处理浅色和深色主题之间的切换（稍后会详细介绍）。这是 html 设置：
Cursor
一个新的IDE，使用AI来帮助您重构、理解、调试和编写代码。
下载
第 3 步：创建 javascript
javascript 处理两个关键任务：
当用户单击图标时在明暗模式之间切换。
将用户的主题偏好存储在 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);
此代码根据之前在
中设置的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);
}
就是这样——为您的熊掌记博客提供亮/暗模式切换！
