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 分为两部分：

中的代码用于在页面加载时设置主题，以及

以上就是Bear 博客上的浅色/深色模式分步指南的详细内容，更多请关注其它相关文章！