Html+css:
Copy code code as follows:
<div> </div>
Copy code code as follows:
<Style>
.cover {
position: fixed;
TOP: 0px;
left: 0px;
outline: 5000px solid RGBA (0, 0, 0, 0.3);
Z-index: 99999;
}
</style>
Then use JavaScript to write a night mode Plus:
Copy code code as follows:
<script>
Var Brightness;
// Display masks
Function Cover (Brightness) {{
if (typeof (div) == 'undefined') {{
div
div.Setattribute ('STYLE', 'Position: FIXED; TOP: 0; left: 0; Outline: 5000px solid; z-index: 99999;');
document.body.appendchild (div);
} Else {
div.style.display = '';
}
div.style.outlinecolor = 'rgba (0,0,0,' + brightness + ')';
}
// Event monitoring
Window.addeventristener ('Keydown', Function (E) {
if (E.ALTKEY && E.Keycode == 90) {// Alt+Z: Open the night mode
COVER (Brightness = 0.3);
}
If (E.ALTKEY && E.Keycode == 88) {// Alt+X: Close
Cover (brightness = 0);
}
if (E.ALTKEY && E.Keycode == 38) {// Alt+↑: increase brightness
if (Brightness -0.05> 0.05) Cover (brightness- = 0.05);
}
if (E.ALTKEY && E.Keycode == 40) {// Alt+↓: Reduce brightness
if (Brightness + 0.05 <0.95) Cover (brightness + = 0.05);
}
}, FALSE);
</script>
You can also write it as a GREASEMONKEY script, as a browser extension to any page to add night mode