一行代码“黑”掉任意网站
一行代码“黑”掉任意网站实用技巧：只需一行代码，轻轻一点就可以把任意网站变成暗黑模式。 首先我们先做一个实验，在任意网站中，打开浏览器开发者工具(F12)，在Console控制台输入如下代码并回车： 1document.documentElement.style.filter='invert(85%) hue-rotate(180deg)' 神奇的事情发生了，当前打开的网站变成了暗黑模式。 详情：原理解释 document.documentElement 获取文档对象的根元素，即<html>元素 给html元素的.style样式添加filter滤镜样式为invert(85%) hue-rotate(180deg) invert() 反转图像。 hue-rotate()色相旋转。 更多滤镜知识：filter。 为了更方便实用，达到轻轻一点就可以对网页施加魔法🎉， 我们对代码做了一点点🤏🏻改动。（修正了滤镜对图片等元素的影响） 1javascript: (function () { const docStyle = ...
如何根据系统主题自动响应CSS深色模式
如何根据系统主题自动响应CSS深色模式 很多人喜欢选择APP或网站中的深色模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何在网站中实现一个自动的CSS深色模式，根据访客的系统主题来自动响应。 CSS 深色模式 (Dark Mode)在:root根元素中定义变量来设置主题的颜色。我建议你也这样做，因为这样会使这个过程容易得多。我定义的变量如下: 12345:root { --bg: #fff; --textColor: #004050; --borderColor: rgba(0,0,0,.15);} :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html>元素，除了优先级更高之外，与 html 选择器相同。 如果希望在样式表中使用这些变量，可以这样做 123body { color: var(--bg);} 这样，如果你想改变你的主题颜色，所需要做的就是修改你定义的变量，所有使用这个变量的样式都会被更新。 现在我们需要...
