我如何在我的网站上实现黑暗模式

这篇文章最初发表在francoscarpa.com上。

francoscarpa.com可以以清晰模式和暗色模式显示。清晰模式适合在明亮的环境中使用，而暗色模式则适合在光线较暗的环境中使用，因为它对眼睛的疲劳程度较低。您可以使用顶部的按钮在两种模式之间切换。更改模式后，它将作为首选项存储，并在每次后续访问中保持，直到您更改为止。我将解释我是如何实现此功能的。

按钮

我从零开始编写了按钮的代码。它是一个 SVG 格式，由一个圆边矩形和一个圆形组成。我的灵感来自iOS 的 Switches控件。我喜欢它们，因为它们很容易模仿。当按钮禁用时，其背景为灰色，圆形位于左侧。当按钮启用时，矩形的背景变为绿色，圆形移动到右侧。此外，动画还提供了视觉反馈，通过按钮状态变化带来的过渡感，提升了用户体验。

生成按钮的 HTML 代码如下：

一个onclick()事件与圆圈关联。只有按下圆圈（而不是周围的矩形）才会激活按钮。这就是为什么按下按钮时看起来似乎不起作用的原因。因此，您必须点击圆圈。

JavaScript代码

模式改变的操作基于以下代码：

该toggleTheme()函数管理从一种模式到另一种模式的转换，并在两种模式之间切换。几个变量存储html元素和按钮。最后的if语句用于在退出当前页面时保存当前选定的主题。访问其他页面后再返回默认的清晰主题会很麻烦。保存设置的选项得益于 Web Storage API，特别是 localStorage 机制，它为每个站点提供持久存储空间。即使您离开站点并稍后返回，首选项也会保留。因此，通过此 API，不仅可以在浏览各个页面时保留当前主题，而且当您稍后访问站点时还会显示上次选择的主题。

该toggleTheme()函数通过调用 setItem() 方法来更新要显示的主题，该方法允许你存储多个值。由于默认设置了浅色主题，为了检查是否应改为使用深色主题，最后的if语句负责调用 getItem() 方法来读取值。每次页面加载时都会执行该函数代码；这样，每次访问 francoscarpa.com 时都会显示相应的主题。