一行代码“黑”掉任意网站

文章目录

只需一行代码,轻轻一点就可以把任意网站变成暗黑模式。
在这里插入图片描述

首先我们先做一个实验,在任意网站中,打开浏览器开发者工具(F12),在 C1onsole 控制台输入如下代码并回车:

document.documentElement.style.filter='invert(85%) hue-rotate(180deg)'

在这里插入图片描述

神奇的事情发生了,当前打开的网站变成了暗黑模式。

*原理解释

  1. document.documentElement 获取文档对象的根元素,即元素
  2. 给html元素的.style样式添加filter滤镜样式为invert(85%) hue-rotate(180deg)
  3. invert() 反转图像。
  4. hue-rotate()色相旋转。

更多滤镜知识:filter (opens new window)。https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

为了更方便实用,达到轻轻一点就可以对网页施加魔法🎉,

我们对代码做了一点点🤏🏻改动。(修正了滤镜对图片等元素的影响)

javascript: (function () {  const docStyle = document.documentElement.style;  if (!window.modeIndex) {    window.modeIndex = 0;  }  const styleList = [    '',    'invert(85%) hue-rotate(180deg)',   'invert(100%) hue-rotate(180deg)',  ];  modeIndex = modeIndex >= styleList.length - 1 ? 0 : modeIndex + 1;  docStyle.filter = styleList[modeIndex];  document.body.querySelectorAll('img, picture, video').forEach(el => el.style.filter = modeIndex ? 'invert(1) hue-rotate(180deg)' : '');})();

然后打开浏览器书签管理器,添加新书签,在网址栏粘贴这段代码并保存:

在这里插入图片描述

以后在任意网站,只需要轻轻一点 切换模式 书签就可以让它变成85%的暗黑,再点一次就是100%的暗黑,再点一次变回正常模式。

如果有什么疑惑联系讨论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/353560.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

用Python让蔡徐坤在我的命令行里打篮球!|附完整代码

点击上方↑↑↑蓝字关注我们~ 「2019 Python开发者日」全日程揭晓,请扫码咨询 ↑↑↑ 来源 | 01二进制(ID:gh_d1999add1857) 编辑 | Jane 【导语】作者自称是一个经常逛 B 站的肥宅。最近 B 站上流行的视频素材除了“换脸”,其次就…

自动化测试,B、C接口要将A接口返回的参数作为入参,有哪些方法?

在进行自动化测试时,如果需要将A接口返回的参数作为B、C接口的入参,可以通过以下几种方法实现: 如果你想学习自动化测试,我这边给你推荐一套视频,这个视频可以说是B站百万播放全网第一的自动化测试教程,同…

直播带货APP小程序系统开发功能有哪些?

直播带货APP小程序系统开发功能有哪些? 1、直播带货:主播一边带货一边直播间活跃气氛,直观地了解产品,下单的概率会更高。还集有观看、打赏、购物、分享于一体。 2、短视频带货:短视频种草,利…

KCNScrew for Mac(mac序列号工具)

KCNScrew for Mac是一款序列号工具,是一款十分简单好用的序列号查找工具。该软件的数据每个月都会更新,包含将近上千款软件的序列号提供给大家。如果你还在苦恼于软件因为没有序列号而不能正常使用到话,想要查看软件序列号的朋友欢迎&#xf…

CuteFTP,8uftp cuteftp

CuteFTP,FTP工具之一,其传输速度比较快,但有时对于一些教育FTP 站点却无法连接。我在进行ftp工具查找时,还发现了这么一款软件:IIS7服务器管理工具。 作为IIS7服务器管理工具,它可以对ftp站点进行批量管理…

Win10下SCP命令免密码上传、下载工程师服务器上的文件

【1】本地win10操作步骤 1)在本地win10系统打开命令行工具(winr) 2)执行命令:ssh-keygen -t rsa 3)提示输入保存路径,直接回车,默认即可。 4)提示输入密码,因…

CAN-TP帧类型(SF/FF/CF/FC)解析

简介 CAN-TP帧类型可分为 单帧和多帧。 单帧(SF) : Single Frame,数据长度小于等于7个Byte(标准CAN是7Byte,CAN-Fd是63Byte)时,使用单帧进行传输 多帧可分为 首帧(FF)/流控帧(FC)…

tcp 序列号

父 tcp,状态. from异常流程_个人渣记录仅为自己搜索用的博客-CSDN博客 转载请注明出处:6-TCP6-TCP 协议(序号和确认号)_tcp 最终确认序号_--Allen--的博客-CSDN博客6-TCP 接下来的内容是学习后续内容的基础,必须先讲清楚。为了…

手把手带你YOLOv5/v7 添加注意力机制,30多种模块分析①,SE模块,SK模块

目录 一、注意力机制介绍1、什么是注意力机制?2、注意力机制的分类3、注意力机制的核心 二、SE模块1、SE模块的原理2、代码实例3、实验结果4、应用示例(1)在 models/yolo.py 文件中定义 SEModule 类,用于实现SE模块。(…

安装使用cuteFTP注意事项

花絮: 一直以来都使用红帽的共享文件来让windows和linux之间进行传输文件,今天头脑一发热,想使用windows下的cuteFTP软件来代替前面的方法。可谁想到,一是cuteFTP在网上根本找不到序列号,找了N久没找到,后…

CuteFTP安装

CuteFTP 9破解版,百度网盘链接:https://pan.baidu.com/s/16SDjxyQF2WtiPKpZHjcueQ 密码:xblr CuteFTP 9破解版是一款非常实用的商业FTP软件,也就是一个FTP客户端。可能很多人不知道FTP是什么,就是一个文件传输系统&…

Java 面试题:Spring,Spring MVC,Spring Boot 之间什么关系?

来,先和我看张图: Spring全家桶了为了解决不同场景的问题,逐渐演化出多套生态环框,如:Spring、SpringMVC、SpringBoot、SpringCloud。 Spring MVC和Spring Boot都属于Spring,Spring MVC是基于Spring的一个…

Springboot配置文件中的明文密码漏洞

目录 一、背景 二、本地修复测试 1、maven中引入jasypt 2、编写加密解密工具类 3、修改配置文件,增加秘钥 4、秘钥放在启动项 三、生产实现 1、升级打包代码 2、生产yml修改明文密码处 3、修改启动命令 一、背景 最近接收到网安的系统安全…

高德地图添加遮罩,实现圈出某个特定的地区

实现效果 一、准备 1、注册账号并申请Key 2、准备页面 <script type"text/javascript" src"https://webapi.amap.com/maps?v1.4.15&key您申请的key值"></script> <div id"container"></div>#container {widt…

vue 高德地图贴地点

效果图 引入高德api maps和local local 用的2.0.0的 其他版本可能会有不兼容问题 mounted(){//设置 地图this.map new AMap.Map(container, {mapStyle: , // 设置地图的自定义样式-深色zoom: 7.3, //级别center: [119.1, 36.32], //中心点坐标viewMode: 3D, // 地图模式resiz…

iOS 跳转到地图后导航(高德地图,百度地图,腾讯地图,苹果手机原生的地图)

1.现在info.plist里面如下图所示添加 2.在下图输入框中输入地名&#xff0c;然后点击前往目的地会出现如下图所示。&#xff08;如果你不知道地方名如何转化为经纬度请看我的另一篇博客&#xff1a;http://blog.csdn.net/chenyongkai1/article/details/51891135&#xff09; 3.…

高德导航免费,那他靠什么收入?

来源 &#xff5c;一口Linux 一位工作了12年的软件工程师说&#xff1a;当你打开导航时&#xff0c;不需要任何费用&#xff0c;还会给高德公司带来丰厚的收入。当时我不信&#xff0c;去查了相关资料后&#xff0c;才知道这个行业不简单。 出门外出&#xff0c;对路线不熟时&a…

C++编译一些常见的错误集锦

1、段错误&#xff08;Segmentation Fault&#xff09; &#xff08;1&#xff09;段错误&#xff08;Segmentation Fault&#xff09;是一种常见的计算机程序错误&#xff0c;通常指向程序试图访问的内存地址超出了程序可访问的内存范围&#xff0c;或者指针指向了无效的内存…

分布式光伏发电远程监控系统

分布式光伏发电远程监控系统 项目背景 新能源、可再生能源接入电网是智能电网建设的重要组成&#xff0c;也是能源互联网发展的基础。近年来&#xff0c;太阳能光伏发电技术快速发展&#xff0c;光伏发电并网对配电网的影响也不断加深。电网调度人员需要人工参与光伏发电站的发…

短视频矩阵源码技术开发

短视频矩阵是一种常见的视频编码标准&#xff0c;它通过将视频分成多个小块并对每个小块进行压缩来实现高效的视频传输。在本文中&#xff0c;我们将介绍短视频矩阵的原理和实现&#xff0c;并提供示例代码。 $where_time array(); // 时间 $where_time[] array(name>fbr…