Use JavaScript to add night mode to a Web page

  How do I add night mode features to Web pages? In fact, the so-called night mode is to add a transparent mask layer on the page, but the mask layer will block the page elements, the solution is to add Div, to the div outline property A large outline-width value, Use a outline border as a mask, so that you can click the page element normally, and you can achieve the effect of night mode

HTML+CSS:     Code as follows: <div class= "Cover" ></div>   code as follows: <style>. cover{    POSIT ion: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:     code as follows: <script> var brightness; Display mask function cover (brightness) {    if (typeof (div) = = ' undefined ') {        div = docu Ment.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.outline Color = ' Rgba (0,0,0, ' + brightness + ') '; //Event Listener Window.addeventlistener (' KeyDown ', function (e) {    if (e.altkey && E.keycode = =) {//alt+z : Open Night Mode &NBsp       cover (brightness = 0.3);    }     if (e.altkey && E.keycode = =) {//alt+x: Off         cover (brig htness = 0);    }     if (e.altkey && E.keycode = =) {//alt+↑: Add brightness         if (brig htness-0.05 > 0.05) cover (brightness-= 0.05);    }     if (e.altkey && E.keycode = =) {//alt+↓: Reduce brightness         if (brig Htness + 0.05 < 0.95) Cover (brightness + + 0.05);    }}, False); </script>     can also be written as a Greasemonkey script, extended as a browser to any page to increase the night mode