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

文章目录

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

首先我们先做一个实验,在任意网站中,打开浏览器开发者工具(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://www.mfbz.cn/a/1364.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Hive 数据倾斜

数据倾斜,即单个节点任务所处理的数据量远大于同类型任务所处理的数据量,导致该节点成为整个作业的瓶颈,这是分布式系统不可能避免的问题。从本质来说,导致数据倾斜有两种原因,一是任务读取大文件,二是任务…

【MIT 6.S081】Lab2: system calls

本Lab包括两个简单系统调用的实现,进一步熟悉系统调用接口。 笔者用时约1.5h 概述 根据文档说明,当我们添加一个系统调用时,比如第一个任务是添加一个trace,需要进行以下操作: 首先将系统调用的原型添加到user/user…

博客系统实现自动化测试

目录 一、设计博客系统的测试用例 二、利用测试用例进行测试 测试登录页面 界面测试 功能测试 测试博客列表页 界面测试 功能测试 测试博客详情页 界面测试 功能测试 博客编辑页测试 界面测试 功能测试 一、设计博客系统的测试用例 二、利用测试用例进行测…

【Java版oj】day12二进制插入、查找组成一个偶数最接近的两个素数

目录 一、二进制插入 (1)原题再现 (2)问题分析 (3)完整代码 二、查找组成一个偶数最接近的两个素数 (1)原题再现 (2)问题分析 (3&#xff0…

One-YOLOv5 v1.2.0 Released(支持分类,检测,实例分割)

0x0. 引言0x1. 快速开始0x2. 在COCO上的精度表现 yolov5s-defaultyolov5s-seg 0x3. 在COCO上的单GPU性能表现特性 & bug 修复 特性用户反馈的bug 下个版本的展望附件常用预训练模型下载列表 0x0. 引言 🌟 v1.2.0同步了ultralytics yolov5的上游分支v7.0 &…

前端入门:HTML5+CSS3+JAAVASCRIPT

1、 初识HTML HTML:Hyper Text Markup Language(超文本标记语言) 。 超文本包括&#xff1a;文字、图片、音频、视频、动画等。 1.1、W3C标准 1.2、HTML基本结构 示例&#xff1a; <!-- DOCTYPE:告诉浏览器&#xff0c;我们要使用什么规划&#xff0c;这里是HTML --> …

IDAFrida

IDA&Frida 前言 偶然间发现了一本秘籍《IDA脚本开发之旅》&#xff0c;这是白龙的系列文章&#xff0c;主要是安卓平台&#xff0c;笔者只是根据他的知识点学习&#xff0c;拓展&#xff0c;可以会稍微提及别的平台。本文并不会贴出他的思路分析&#xff0c;只对于源码进…

C语言实现单链表(超多配图,这下不得不学会单链表了)

目录 一&#xff1a;什么是链表&#xff1f; 二&#xff1a;创建源文件和头文件 (1)头文件 (2)源文件 三&#xff1a;实参和形参 四&#xff1a;一步步实现单向链表 &#xff08;1&#xff09;建立一个头指针并置空 &#xff08;2&#xff09;打印链表&#xff0c;便于…

*p++,*(p++),*++p,(*p)++区别?

*p++:等同于:*p; p += 1; 解析:由于和++的运算优先级一样,且是右>结合。故p++相当于*(p++),p先与++结合,>然后p++整体再与结合。前面陈述是一种最 常见的错误,很多初学者也是这么理解的。 但是,因为++后置的时候,本身含义就是先 运算后增加1(运算指的是p++作为…

GPT-4最震撼我的一点

昨天我看了一遍OpenAI发的视频和论文&#xff0c;最震撼我的并不是根据手绘草图生成HTML页面代码&#xff0c;因为草图太简单&#xff0c;对于复杂的有交互的界面&#xff0c;还不知道它的能力究竟如何&#xff0c;能不能生成准确的、清晰的代码&#xff0c;我再实验一下再给大…

C实现栈及OJ题有效的括号

文章目录栈概念及基本操作源码OJ题括号匹配栈概念及基本操作 栈也同链表和顺序表一样是一种线性表只是比较特殊而已&#xff0c;栈遵循一种先进后出的原则,其实栈就像生活中的叠盘子一样&#xff0c;将盘子一个一个的叠起来&#xff0c;每次都只能在最顶层叠&#xff0c;然后取…

ElasticSearch快速入门详解(亲测好用,强烈推荐收藏)

3.快速入门 接下来快速看下elasticsearch的使用 3.1.概念 Elasticsearch虽然是一种NoSql库&#xff0c;但最终的目的是存储数据、检索数据。因此很多概念与MySQL类似的。 ES中的概念数据库概念说明索引库&#xff08;indices)数据库&#xff08;Database&#xff09;ES中可…

聊聊「订单」业务的设计与实现

订单&#xff0c;业务的核心模块&#xff1b; 一、背景简介 订单业务一直都是系统研发中的核心模块&#xff0c;订单的产生过程&#xff0c;与系统中的很多模块都会高度关联&#xff0c;比如账户体系、支付中心、运营管理等&#xff0c;即便单看订单本身&#xff0c;也足够的复…

带你了解Redis及安装Redis的全过程

文章目录Redis是什么&#xff1f;官网介绍与传统的数据库的区别优势Redis下载安装Redis①配置gcc②开始安装redisRedis是什么&#xff1f; Redis&#xff1a;REmote Dictionary Server&#xff08;远程字典服务&#xff09;基于内存的Key—Value键值对内存数据库 官网介绍 R…

JVM学习.01 内存模型

1、前言对于C、C程序员来说&#xff0c;在内存管理领域&#xff0c;他们拥有对象的“所有权”。从对象建立到内存分配&#xff0c;不仅需要照顾到对象的生&#xff0c;还得照顾到对象的消亡。背负着每个对象生命开始到结束的维护和管理责任。对于JAVA程序来说&#xff0c;因为J…

第十四届蓝桥杯三月真题刷题训练——第 15 天

目录 第 1 题&#xff1a;斐波那契与7 问题描述 答案提交 运行限制 代码&#xff1a; 第 2 题&#xff1a;小蓝做实验 问题描述 答案提交 运行限制 代码&#xff1a; 第 1 题&#xff1a;斐波那契与7 问题描述 斐波那契数列的递推公式为: FnFn−1Fn−2​, 其中 F1F21…

【C#进阶】C# 索引器

序号系列文章13【C#进阶】C# 特性14【C#进阶】C# 反射15【C#进阶】C# 属性文章目录前言1、索引器的概念2、索引器的定义3、索引器的基本使用4、索引器的重载5、接口中的索引器6、属性和索引器之间的比较7、索引器的适用场景结语前言 &#x1f342; Hello大家好啊&#xff0c;我…

News乐鑫科技亮相德国嵌入式展 Embedded World 2023!

3 月 14 日&#xff0c;德国纽伦堡嵌入式展 Embedded World 2023 火热启幕。本届 Embedded World 主题为 “embedded. responsible. sustainable”&#xff0c;乐鑫科技 (688018.SH) 携众多 AIoT 科技成果亮相展会&#xff0c;致力于打造更智能、更互联、更绿色的物联网未来。…

Linux - 进程地址空间

引入在学习C语言的时候&#xff0c;内存包括栈区、堆区、静态区这个布局是内存吗&#xff1f; 不是&#xff01;&#xff01; 这是进程地址空间&#xff01;下面测试一下&#xff1a;11540是bash进程我们修改一下源程序&#xff0c;在观察下结果发现父进程的g_value的值不变&am…

TVS和稳压管的相同点和不同点

大家好,我是记得诚。 文章目录 介绍相同点不同点介绍 TVS和稳压管都是电路中很常用的电子元器件,都是二极管的一个种类。 TVS二极管全称是Transient voltage suppression diode,也叫瞬态电压抑制二极管。 稳压二极管英文名字Zener diode,又叫齐纳二极管。 关于稳压二极…
最新文章