编写JavaScript来达到自定义CSS（夜间模式）
前言
由于视雪症的影响，导致一看需要集中精力的亮色文档时就会被不断刷新的彩色小点干扰，但发现换成暗色后就好很多，所以写此文灌个水。小白看看还是可以的😄
网页基本概念
网页由三部分组成：HTML、Javascript、CSS
简单理解即是HTML以标签的形式存储了网页内容，再通过CSS修改元素的样式（背景颜色、文字颜色等），一般网页内互动的元素都通过Javascript来控制（干最累的活😭）
示例：
<div id="only" class="many">这是一些内容</div>
CSS选择的语法大致如下（/* */为注释内容，只作标记，计算机不会解析…）：
/* 通过元素名 */
div {
color: #114514;
}
/* 通过id */
#only {
color: #191981;
}
/* 通过class(类) */
.many {
...;
}
/* 当然你可以将以上组合起来 */
div#only.many{}
实践&编写
实践
首先在你需要更改样式的网页上打开开发人员工具，在弹出窗口的左上角应有选择元素的按钮。
点击并将鼠标移至网页页面，将预选择的框移至你想要修改的元素上再左键。右边一栏则就会定位至HTML内容中该元素的位置。
既然现在选择了我们需要修改的元素，那么就试试修改CSS来达到暗色效果吧。
在中间样式一栏element.style处单击并输入
/* 设置背景颜色与作用范围 */
background-clip: content-box;
background-color: black;
/* 设置文字颜色 */
color: #c5c5c5;
关于背景颜色作用范围，默认不设置的话是包含border和padding在内的。
设置为content-box只作用于具体内容下（不包含内边距和边框）
当然在你这样做之后你会发现现在的网页奇丑无比，甚至于都开始对我进行人身攻击了也说不定
但是你先别急，这样吧，你点击中间那个加号新建样式规则。再将这段CSS输入：
*:not(main *):not(main) {
background-color: #0e1519 !important;
color: lightgray !important;
}
此处main为元素名，*为通配符即匹配所有元素，:not为不匹配（包含）
应该就差不多了。剩下的就是些小改动，自己尝试一下吧？
（比如CSS规则同时有多个!important时会按照选择器的具体程度来决定样式，这种时候编写选择器比它更具体就行
）
JavaScript
安装Tampermonkey后添加新脚本将以下内容复制粘贴就行了（恭喜你学会了面向Ctrl+c Ctrl+v编程
）
// ==UserScript==
// @name Simple Script By Myself
// @version 2022.10.07
// @description I have two sides...
// @match https://course.rs/*
// @grant none
// ==/UserScript==
function applyStyleIfMatch(regex, cssContent) {
var url = window.location.href;
if (regex.test(url.hostname)) {
var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = cssContent;
style.id = "addStyle";
document.getElementsByTagName("HEAD").item(0).appendChild(style);
}
}
applyStyleIfMatch(/course\.rs\/*/, "code {font-family: 'Hasklug Nerd Font Mono' !important;} html{font-family: '微软雅黑' !important;} .content main{color: #c5c5c5;background-color: black;background-clip: content-box;}");
呃，但运行起来其实还需要修改一下的。可是我累了…
为什么不问问神奇的ChatGPT呢？
脱裤子放屁？🤔
Well,Actually…☝️🤓
事实上确实有一个扩展是可以生成暗色样式的：Dark Reader
但是好像无法自定义吧？（应该吧应该吧？不然我这不是没意义了嘛。。
且不想装那么多浏览器扩展，再加上有些文档本身就带暗色模式，小修一下就行。