Use javascript to add night mode for webpages

How can I add the night mode function to a Web page? In fact, the so-called night mode adds a transparent mask layer on the page, but the mask layer blocks the page elements. The solution is to add a DIV, A large outline-width value is given to the outline attribute of the DIV, And the outline border is used as the mask. This allows you to click the page element normally and achieve the effect of the night mode.

HTML + CSS: the code is as follows: <div class = "cover"> </div> the code is 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 nighttime mode plus: the code is as follows: <script> var brightness; // display mask function cover (brightness) {if (typeof (div) = 'undefined') {div = document. createElement ('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 listening window. addEventListener ('keylow', function (e) {if (e. altKey & e. keyCode = 90) {// Alt + Z: Enable night mode cover (brightness = 0.3);} if (e. altKey & e. keyCode = 88) {// Alt + X: Disable cover (brightness = 0);} if (e. altKey & e. keyCode = 38) {// Alt + brightness: Increase the brightness if (brightness-0.05> 0.05) cover (brightness-= 0.05);} if (e. altKey & e. keyCode = 40) {// Alt + brightness: brightness reduction if (brightness + 0.05 <0.95) cover (brightness + = 0.05) ;}}, false ); </script> You can also write a GreaseMonkey script to add the night mode to any page as a browser extension.