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


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

    实用技巧:只需一行代码,轻轻一点就可以把任意网站变成暗黑模式。

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

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

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

    ::: details 原理解释

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

    更多滤镜知识: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)' : '');})();
    
    • 1

    然后打开浏览器书签管理器,添加新书签,在网址栏粘贴这段代码并保存,以后在任意网站,只需要轻轻一点切换模式书签就可以让它变成85%的暗黑,再点一次就是100%的暗黑,再点一次变回正常模式。

  • 相关阅读:
    WMS仓储管理系统的功能与WCS系统有什么区别
    QT中QThread的各个方法,UI线程关系,事件关系详解(3)
    python爬取boss直聘数据(selenium+xpath)
    CentOS 7.x 安装MongoDB
    echarts图表 柱状图柱体颜色渐变
    Linux Shell脚本一文读懂
    pytorch之nn.Conv1d详解
    A tour of gRPC:01 - 基础理论
    Mybatis使用
    LLaMA模型指令微调 字节跳动多模态视频大模型 Valley 论文详解
  • 原文地址:https://blog.csdn.net/qq_43699122/article/details/125531868