本文主要是介绍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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!