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

相关文章

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 设置子

SpringBoot如何通过Map实现策略模式

《SpringBoot如何通过Map实现策略模式》策略模式是一种行为设计模式,它允许在运行时选择算法的行为,在Spring框架中,我们可以利用@Resource注解和Map集合来优雅地实现策略模式,这... 目录前言底层机制解析Spring的集合类型自动装配@Resource注解的行为实现原理使用直接使用M

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3