文章目录
- 前言
- 正文
- 1.多主题切换
- 2.使用 SASS 实现轻松深色模式
- 3.动画切换浅色与深色模式
- 4.纯 CSS 主题切换
- 5.GitHub 风格的深色模式切换
- 6.持久深色模式
- 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个代码片段展示了如何优雅地切换模式,既美观又实用,能有效提升网站的可用性和用户满意度。