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设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

Redis Cluster模式配置

《RedisCluster模式配置》:本文主要介绍RedisCluster模式配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录分片 一、分片的本质与核心价值二、分片实现方案对比 ‌三、分片算法详解1. ‌范围分片(顺序分片)‌2. ‌哈希分片3. ‌虚

github打不开的问题分析及解决

《github打不开的问题分析及解决》:本文主要介绍github打不开的问题分析及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、找到github.com域名解析的ip地址二、找到github.global.ssl.fastly.net网址解析的ip地址三

RabbitMQ工作模式中的RPC通信模式详解

《RabbitMQ工作模式中的RPC通信模式详解》在RabbitMQ中,RPC模式通过消息队列实现远程调用功能,这篇文章给大家介绍RabbitMQ工作模式之RPC通信模式,感兴趣的朋友一起看看吧... 目录RPC通信模式概述工作流程代码案例引入依赖常量类编写客户端代码编写服务端代码RPC通信模式概述在R

SQL Server身份验证模式步骤和示例代码

《SQLServer身份验证模式步骤和示例代码》SQLServer是一个广泛使用的关系数据库管理系统,通常使用两种身份验证模式:Windows身份验证和SQLServer身份验证,本文将详细介绍身份... 目录身份验证方式的概念更改身份验证方式的步骤方法一:使用SQL Server Management S

Redis高可用-主从复制、哨兵模式与集群模式详解

《Redis高可用-主从复制、哨兵模式与集群模式详解》:本文主要介绍Redis高可用-主从复制、哨兵模式与集群模式的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录Redis高可用-主从复制、哨兵模式与集群模式概要一、主从复制(Master-Slave Repli

一文带你搞懂Redis Stream的6种消息处理模式

《一文带你搞懂RedisStream的6种消息处理模式》Redis5.0版本引入的Stream数据类型,为Redis生态带来了强大而灵活的消息队列功能,本文将为大家详细介绍RedisStream的6... 目录1. 简单消费模式(Simple Consumption)基本概念核心命令实现示例使用场景优缺点2

Nginx location匹配模式与规则详解

《Nginxlocation匹配模式与规则详解》:本文主要介绍Nginxlocation匹配模式与规则,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、环境二、匹配模式1. 精准模式2. 前缀模式(不继续匹配正则)3. 前缀模式(继续匹配正则)4. 正则模式(大

Linux系统配置NAT网络模式的详细步骤(附图文)

《Linux系统配置NAT网络模式的详细步骤(附图文)》本文详细指导如何在VMware环境下配置NAT网络模式,包括设置主机和虚拟机的IP地址、网关,以及针对Linux和Windows系统的具体步骤,... 目录一、配置NAT网络模式二、设置虚拟机交换机网关2.1 打开虚拟机2.2 管理员授权2.3 设置子