GitHub 夜间阅读模式 自行DIY

2024-01-01 14:18

本文主要是介绍GitHub 夜间阅读模式 自行DIY,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近再github上阅读文章,屏幕属实太亮了,晚上更是特刺激眼睛,做了个夜间模式脚本,样式可以直接在 createCss 方法中修改
自行DIY

使用方法

1.油猴加载  (没有梯子,自行寻找资源)

2.在控制台 复制粘贴 输入

屏幕右下角有个按钮,通过按钮控制

代码:

(function() {'use strict';const DimLight = {data(){return{dom:null}},click(){switch(DimLight.dom.innerText){case '夜间模式':{console.log('触发夜间模式')DimLight.ye();break;}case '白天模式':{console.log('白天模式')DimLight.light();}}},ye (){ //夜间模式let bgc = document.querySelectorAll('.Box')for(let i = 0;i < bgc.length ; i++){bgc[i].classList.add('single_main_main')}document.querySelector('.application-main').classList.add('single_main_main_b1')console.log(this.dom)this.dom.innerText = '白天模式'},light(){ //白天模式let bgc = document.querySelectorAll('.Box')for(let i = 0;i < bgc.length ; i++){bgc[i].classList.remove('single_main_main')}document.querySelector('.application-main').classList.remove('single_main_main_b1')this.dom.innerText = '夜间模式'},createNode(){ //构造节点let kuai = document.createElement('div')this.dom = kuaikuai.classList.add('single_kuai_light')kuai.innerText = '夜间模式'kuai.addEventListener('click',this.click)document.querySelector('body').appendChild(kuai)},createCss(){let style = document.createElement('style')style.type = 'text/css';style.innerHTML = `.single_kuai_light{height:70px;width:70px;background-color:weat;position:fixed;bottom:100px;right:10px;border-radius:15px;box-sizing:border-box;border:1px solid black;font-size:17px;padding:9px;text-align:center;cursor:pointer;}.single_kuai_light:hover{color:white;background-color:rgba(0,0,0,0.8)}.single_main_main{color:burlywood;background-color:black;}.single_main_main_b1{background-color:black;}`document.querySelector('head').appendChild(style)},initializeData(){const nowdata = this.data()Object.keys(nowdata).some(item => {this[item] = nowdata[item]})},start(){this.initializeData();this.createCss();this.createNode();}}DimLight.start()// Your code here...
})();

 

这篇关于GitHub 夜间阅读模式 自行DIY的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/559506

相关文章

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

论文阅读笔记: Segment Anything

文章目录 Segment Anything摘要引言任务模型数据引擎数据集负责任的人工智能 Segment Anything Model图像编码器提示编码器mask解码器解决歧义损失和训练 Segment Anything 论文地址: https://arxiv.org/abs/2304.02643 代码地址:https://github.com/facebookresear

模版方法模式template method

学习笔记,原文链接 https://refactoringguru.cn/design-patterns/template-method 超类中定义了一个算法的框架, 允许子类在不修改结构的情况下重写算法的特定步骤。 上层接口有默认实现的方法和子类需要自己实现的方法

【iOS】MVC模式

MVC模式 MVC模式MVC模式demo MVC模式 MVC模式全称为model(模型)view(视图)controller(控制器),他分为三个不同的层分别负责不同的职责。 View:该层用于存放视图,该层中我们可以对页面及控件进行布局。Model:模型一般都拥有很好的可复用性,在该层中,我们可以统一管理一些数据。Controlller:该层充当一个CPU的功能,即该应用程序

迭代器模式iterator

学习笔记,原文链接 https://refactoringguru.cn/design-patterns/iterator 不暴露集合底层表现形式 (列表、 栈和树等) 的情况下遍历集合中所有的元素

如何提高 GitHub 的下载速度

如何提高 GitHub 的下载速度 文章目录 如何提高 GitHub 的下载速度1. 注册账号2. 准备好链接3. 创建仓库4. 在码云上下载代码5. 仓库更新了怎么办 一般来说,国内的朋友从 GitHub 上面下载代码,速度最大是 20KB/s,这种龟速,谁能忍受呢? 本文介绍一种方法——利用“码云”,可以大大提高下载速度,亲测有效。 1. 注册账号 去“码云”注册一

《x86汇编语言:从实模式到保护模式》视频来了

《x86汇编语言:从实模式到保护模式》视频来了 很多朋友留言,说我的专栏《x86汇编语言:从实模式到保护模式》写得很详细,还有的朋友希望我能写得更细,最好是覆盖全书的所有章节。 毕竟我不是作者,只有作者的解读才是最权威的。 当初我学习这本书的时候,只能靠自己摸索,网上搜不到什么好资源。 如果你正在学这本书或者汇编语言,那你有福气了。 本书作者李忠老师,以此书为蓝本,录制了全套视频。 试

利用命令模式构建高效的手游后端架构

在现代手游开发中,后端架构的设计对于支持高并发、快速迭代和复杂游戏逻辑至关重要。命令模式作为一种行为设计模式,可以有效地解耦请求的发起者与接收者,提升系统的可维护性和扩展性。本文将深入探讨如何利用命令模式构建一个强大且灵活的手游后端架构。 1. 命令模式的概念与优势 命令模式通过将请求封装为对象,使得请求的发起者和接收者之间的耦合度降低。这种模式的主要优势包括: 解耦请求发起者与处理者

springboot实战学习(1)(开发模式与环境)

目录 一、实战学习的引言 (1)前后端的大致学习模块 (2)后端 (3)前端 二、开发模式 一、实战学习的引言 (1)前后端的大致学习模块 (2)后端 Validation:做参数校验Mybatis:做数据库的操作Redis:做缓存Junit:单元测试项目部署:springboot项目部署相关的知识 (3)前端 Vite:Vue项目的脚手架Router:路由Pina:状态管理Eleme