一键切换暗黑模式，这些代码片段你不可错过

文章目录

• 前言
• 正文
• • 1.多主题切换
  • [2.使用 SASS 实现轻松深色模式](#2.使用 SASS 实现轻松深色模式)
  • 3.动画切换浅色与深色模式
  • [4.纯 CSS 主题切换](#4.纯 CSS 主题切换)
  • [5.GitHub 风格的深色模式切换](#5.GitHub 风格的深色模式切换)
  • 6.持久深色模式
  • [7.基本 Vue 响应式切换](#7.基本 Vue 响应式切换)
  • 8.创意灯泡切换
• 总结

---

前言

如今，许多网站设计师都会为用户提供浅色和深色模式的选择。这不仅仅是为了美观，更是为了提高网页的可访问性，尤其是对视力有障碍的用户来说，深色模式更友好。让用户自由切换自己喜欢的模式，是提升用户体验的关键。

---

正文

1.多主题切换

这个设置面板提供了浅色、深色和黑色三种模式。切换过程平滑流畅，带来更好的用户体验。通过 HTML 单选按钮实现的切换功能，简洁美观又实用。

源码：https://codepen.io/havardob/pen/dyOJyje

2.使用 SASS 实现轻松深色模式

通过简单的复选框触发切换，JavaScript 添加 data-theme 属性到 HTML 标签上，SASS 根据该属性的值来实现不同样式的切换。

源码：https://codepen.io/KaioRocha/pen/MdvWmg

3.动画切换浅色与深色模式

此代码片段利用 SVG 图片和动画效果实现了独特的日夜模式切换。虽然视觉效果出色，但在正式上线之前，最好加强对可访问性的支持。

源码： https://codepen.io/lerida/pen/ZEbWBjp

4.纯 CSS 主题切换

这个例子只使用 CSS 即可实现模式切换，并且通过 HTML 表单确保了对所有用户的可访问性。

源码：https://codepen.io/michellebarker/pen/GzzrGJ

5.GitHub 风格的深色模式切换

这个大尺寸的切换按钮不仅会改变页面的对比模式，还会根据模式的变化调整背景颜色，非常有趣。

源码：https://codepen.io/chintuyadav/pen/yLaaVYa

6.持久深色模式

如果你追求简约，这款模式切换按钮就是理想选择。通过 JavaScript 将用户的选择存储在本地，保持他们的偏好不变。

源码：https://codepen.io/brianhaferkamp/pen/WNrJmZb

7.基本 Vue 响应式切换

随着越来越多的用户界面依赖 JavaScript，Vue 组件的实现让用户可以通过简单的复选框轻松切换模式。

源码：https://codepen.io/team/codepen/pen/MRoLdr

8.创意灯泡切换

这款摆动的灯泡切换设计非常具有创意，通过 CSS 动画实现了独特的深色模式转换，非常适合用于个人作品集或博客。

源码：https://codepen.io/airen/pen/dyYNPWQ

---

总结

为网站提供深浅模式切换，不仅提升美观，还改善用户体验，尤其对有视觉障碍的用户有帮助。通过 CSS 和 JavaScript，可以轻松实现这个功能。上述8个代码片段展示了如何优雅地切换模式，既美观又实用，能有效提升网站的可用性和用户满意度。