Use javascript to add night mode to web pages_javascript tips

HTML CSS:

Copy code The code is as follows:

Copy code The code is as follows:

Then use JavaScript to write a night mode plus:

Copy the code The code is as follows:

<script><br>var brightness;<br>//Display mask<br>function cover(brightness) {<br> if (typeof(div) == 'undefined') {<br> div = document. createElement('div');<br> div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid;z-index:99999;');<br> document. body.appendChild(div);<br> } else {<br> div.style.display = '';<br> }<br> div.style.outlineColor = 'rgba(0,0,0,' brightness ' )';<br>}<br>//Event listening<br>window.addEventListener('keydown', function(e) {<br> if (e.altKey && e.keyCode == 90) { //Alt Z: Turn on night mode <br> cover(brightness = 0.3);<br> }<br> if (e.altKey && e.keyCode == 88) { //Alt X: Turn off <br> cover(brightness = 0 ; <br> }<br> if (e.altKey && e.keyCode == 40) { //Alt ↓:Reduce brightness<br> if (brightness 0.05 < 0.95) cover(brightness = 0.05);<BR> } <BR>}, false);<BR></script>



It can also be written as a GreaseMonkey script and used as a browser extension to add night mode to any page