您现在的位置是：网站首页> 编程资料编程资料

纯CSS免费让网站拥有暗黑模式切换功能的实现代码CSS变量实现暗黑模式的示例代码Html页面支持暗黑模式的实现详解Html5项目适配系统深色模式方案总结

2023-10-17 326人已围观

简介 这篇文章主要介绍了纯CSS免费让网站拥有暗黑模式切换功能的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

前言

暗黑模式这个概念最早起源于 MacOS系统 的 Mojave ，提供 浅色主题 和 深色主题 两种皮肤供用户选择， 深色主题 就是我们常说的 暗黑模式 。为了眼睛健康，笔者在手机、平板和电脑上都选择了 暗黑模式 。

随着苹果官方逐渐要求各大系统平台都得适配 暗黑模式 ，所以笔者也探索出一种应该是 市面上最低成本 的 网站暗黑模式适配方案 。

认识笔者的朋友应该都知道笔者是一位重度CSS发烧友，当然这次也是使用纯CSS实现这个方案。是的，不加任何一段JS，侧面再次证明CSS的强大。

思路

思路很简单，使用一个按钮来回切换主题样式。按钮未选中则切换到 浅色主题 ，按钮选中则切换到 深色主题 。可用 :checked 和 + 打辅助完成这个任务。

:checked ：选项选中的表单元素

 + ：元素相邻的同胞元素

使用 模拟按钮，当按钮处于选中状态时触发 :checked ，通过 + 带动后面相邻的网站主体

进入 暗黑模式 ，选中状态取消时则退出 暗黑模式 。

网站主体

更多选择器的功能和分类请回看笔者这篇文章 《可能是最全最易记的CSS选择器分类大法》 。

切换按钮

打算设计一个美观的按钮，可是没有特别思路，就打开iPhone，把设置里的 切换按钮 用纯CSS实现一番。

尺寸和颜色都是与 iPhone切换按钮 一致。思路是使用 模拟按钮，声明 appearance:none 将其默认外观抹去，使用 ::before 模拟背景区域，使用 ::after 模拟点击区域，在触发 :checked 后添加一些小动画进行修饰，近乎完美地实现了 iPhone切换按钮 。

 .btn { border-radius: 31px; width: 102px; height: 62px; background-color: #e9e9eb; } .ios-switch { position: relative; appearance: none; cursor: pointer; transition: all 100ms; @extend .btn; &::before { position: absolute; content: ""; transition: all 300ms cubic-bezier(.45, 1, .4, 1); @extend .btn; } &::after { position: absolute; left: 4px; top: 4px; border-radius: 27px; width: 54px; height: 54px; background-color: #fff; box-shadow: 1px 1px 5px rgba(#000, .3); content: ""; transition: all 300ms cubic-bezier(.4, .4, .25, 1.35); } &:checked { background-color: #5eb662; &::before { transform: scale(0); } &::after { transform: translateX(40px); } } }

请戳 这里 查看在线演示与源码。

暗黑模式

还记得4月4日那次全网开启悼念模式吗？笔者发表了一篇文章 《一行代码全站进入悼念模式》 ，巧妙地使用 filter 这个强大的CSS属性。

 html { filter:grayscale(1); }

真的是一行代码，本次也不例外， 一行代码全站进入暗黑模式 。

 html { filter: invert(1) hue-rotate(180deg); }

filter 的兼容性不差，各位同学可放心使用，还有一些细节地方需注意，本文就不重复讲解了，详情可回看 《一行代码全站进入悼念模式》 。

filter 是一个非常神奇的属性，能将 Photoshop 一些基础的滤镜效果应用到网站上。笔者平时非常喜欢使用 filter ，在笔者的CodePen 上有许多纯CSS特效都使用了 filter ，细心的同学可能会发现笔者特别喜欢使用 hue-rotate() 这个函数结合 CSS变量 动态生成过渡颜色，详情请回看 《妙用CSS变量，让你的CSS变得更心动》 。

本次的 暗黑模式 使用到两个滤镜函数： invert() 、 hue-rotate() 。

invert() ：反相，反向输出图像着色，值为 0% 则无变化，值为 0~100% 则是线性乘子效果，值为 100% 则完全反转

hue-rotate() ：色相旋转，减弱图像着色，处理非黑白的颜色，值为 0deg 则无变化，值为 0~360deg 则逐渐减弱，值超过 360deg 则相当绕N圈再计算剩余的值

invert() 简单理解就是 黑变白，白变黑，黑白颠倒 。 hue-rotate() 简单理解就是 冲淡颜色 。为了确保主题色调不会改变，将色相旋转声明为 180deg 比较合理。

依据上述分析的思路，当按钮处于选中状态时使用 + 连带后面的同胞元素也进入选中状态。若同胞元素无背景色需声明 background-color:#fff ，否则无法让滤镜效果起效，为了让这个同胞元素在使用滤镜效果时过渡得更自然，声明 transition:all 300ms 。

 .ios-switch { ... &:checked { ... & + .main { filter: invert(1) hue-rotate(180deg); } } } .main { background-color: #fff; transition: all 300ms; }

在 CodePen 上为了更好地展示效果，就使用