专栏首页前端开发博客CSS瞬间黑暗模式

CSS瞬间黑暗模式

最近微信也逃脱不了黑暗时代的到来,网页也很多都做了黑暗模式的兼容和主题。如果我们在做的一个网站想瞬间实现黑暗模式可以怎么实现呢?

其实有一个很快的方式,我们可以使用inverthue-rotate两个CSS3过滤器来实现。

filter: invert() — 是从01的刻度,1是从白变黑。filter: hue-rotate() — 用于改变你元素的颜色,同时或多或少保持原本相同的色系。这个属性的值可以从0deg360deg

在我们页面的body标签上添加这两个属性,我们就可以快速尝试把我们的网站变成"黑暗模式"。这里需要注意的是,如果bodyhtml上没有设置background背景颜色,这个过滤就会不起效了哦。

CSS的代码如下:

html {
  background: #fff;
}

body {
  background: #fff;
  filter: invert(1) hue-rotate(270deg);
}

实现效果

这里我们会发现图片的颜色会受影响,并不是很美观,使用css过滤器是无法完美切换黑暗模式的。不过使用JavaScript辅助就可以完美的切换黑暗模式。

最近出了一个JavaScript辅助插件叫Darkmode.js

? Darkmode.js

其实Darkmode.js运用的也是css里面的一个特性叫mix-blend-mode — “CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合“。加上Javascript的辅助判断哪些页面上的元素需要黑化的,哪些是不需要黑化的。就会想我们之前那种做法,导致其他不需要黑化的元素,比如图片,受到影响导致颜色出现问题。

使用Darkmode.js非常简单,只要在脚本里面添加以下代码就可以马上加入一个插件,

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>
  // 这些是这个插件的可配置项:
  var options = {
    bottom: "32px", // 定位底部距离 - 默认: '32px'
    right: "32px", // 定位右边距离 - 默认: '32px'
    left: "unset", // 定位左边距离 - 默认: 'unset'
    time: "0.5s", // 默认动画时间: '0.3s'
    mixColor: "#fff", // 需要改变的颜色 - 默认: '#fff'
    backgroundColor: "#fff", // 背景颜色 - 默认: '#fff'
    buttonColorDark: "#262728", // 黑暗模式下按钮颜色 - 默认: '#100f2c'
    buttonColorLight: "#fff", // 日间模式下按钮颜色 - 默认: '#fff'
    saveInCookies: true, // 是否在cookie保存当前模式 - 默认: true,
    label: "?", // 切换模式按钮图标 - 默认: ''
    autoMatchOsTheme: true // 是否自动根据系统适应模式 - 默认: true
  };

  let darkmode = new Darkmode(options);
  darkmode.showWidget();
</script>

如果你不希望用这个插件的默认按钮,你可以在你的JavaScript代码中自主控制。我们可以通过.toggle()方法来切换模式,同时可以使用.isActivated()来检测是否已经进入黑暗模式。

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // 如果已经进入黑暗模式会返回 true

知识总结

  • filter: invert() — 可以把页面从白变黑,也可以从黑变白。
  • filter: hue-rotate() — 用于改变你元素的颜色,同时或多或少保持原本相同的色系。
  • Darkmode.js — 瞬间实现黑暗模式。
  • 源码:https://darkmodejs.learn.uno/

本文分享自微信公众号 - 前端开发博客(caibaojian_com)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端开发博客微信群第三周面试题汇总

    一周的面试题有点多,希望你能够转发收藏起来,方便自己后面有时间可以更好的回顾备忘,也当做是对我们的一点支持,如果你有更好的点子,欢迎加入前端开发微信群,这里有很...

    前端开发博客
  • 前端开发博客一周面试题汇总

    感谢管理员一周的面试题汇总。希望大家多多支持我们的管理员,记得赞赏、点好看、转发一条龙支持他的工作。

    前端开发博客
  • 比较JS合并数组的各种方法及其优劣

    编者注:js数组的合并在前端制作中是一个经常遇到的需求,平常用得最多的就是concat()方法了,这里作者给出了多种做法,包括将一个数组元素push或者unsh...

    前端开发博客
  • Vue 新增不参与打包的接口地址配置文件

    vue工程项目,npm run build webpack方式打包,每次打包后如果需要更改后台接口地址(项目中,接口地址设置成变量,存放在js文件中,需要用到的...

    授客
  • npm并行&串行执行多个scripts命令

    通过npm run <commander> 可以运行 package.json 中脚本,Npm 命令不能提供立即运行多个脚本的方式,同时运行需要打开多个终端窗口

    奋飛
  • 项目实战_Python.利用Python

    说明: 主要用于Redis实例集中化实时主动监控,后端采用Python+Flask实现,具体实现代码请阅读代码

    py3study
  • thinkjs学习笔记

    thinkjs的配置有很多,系统默认配置 -> 应用配置 -> 调试配置 -> 模式配置 基本上只用到应用配置,应用配置的路径是App/Conf/config....

    IMWeb前端团队
  • thinkjs学习笔记

    thinkjs 开始 安装 npm install -g thinkjs-cmd 查看是否安装成功 thinkjs -v 新建项目 mkdir new_dir_...

    IMWeb前端团队
  • 基于webpack4搭建的react项目框架

    框架介绍,使用webpac构建的react单页面应用,集成antd。使用webpack-dev-server启动本地服务,加入热更新便于开发调试。使用bundl...

    random_wang
  • Android系统目录介绍

    src目录:完成对java代码的编写 assets目录: 资源目录 res目录: 图片,布局文件和字符串,菜单等文件 bin目录:输出文件夹 如生成的apk安装...

    欢醉

扫码关注云+社区

领取腾讯云代金券