最近再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...
})();