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 = kuai
            kuai.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...
})();