Night Mode

Privacy Browser’s night mode is designed to allow users to browse websites in low light conditions where bright whites are blinding to the eyes. It accomplishes this by modifying the CSS of the website. These modifications are currently made by using JavaScript to inject custom CSS (Cascading Style Sheets) after the website finishes loading. Currently, JavaScript is automatically enabled when night mode is enabled. With the release of Privacy WebView in the 4.x series, it will be possible to modify a website’s CSS and enable night mode without enabling JavaScript.

To prevent websites from initially loading bright colors before the JavaScript is applied, the WebView is hidden while the page is loaded. This limitation will also be removed with the release of Privacy WebView.

The current night mode CSS is described below. It is a basic set of commands that work well across most websites, but they do remove many of the details of websites. At some point in the future I plan to create a more sophisticated set of CSS settings, as well as provide options for users to set their own CSS. Suggestions are welcome.

* {
background-color: #212121 !important;
color: #BDBDBD !important;
box-shadow: none !important;
text-decoration: none !important;
text-shadow: none !important;
border: none !important;
}

a {
color: #1565C0 !important;
}

::selection {
background: #0D47A1 !important;
}

* formats all elements with the following characteristics. background-color: #212121 sets a dark gray background. color: #BDBDBD sets the text to be a light gray. box-shadow: none removes a form of underline that some websites use for links. text-decoration: none removes the standard underline used for links. text-shadow: none removes text shadows (which don’t often match well against the dark background). border: none removes borders around text and other objects.

a formats links. color: #1565C0 sets the text color to be a dark blue.

::selection formats selected text. background: #0D47A1 sets the highlight background to be a dark blue.

!important overrides any more specific directives that may exist unless they also have the !important tag.

Leave a comment

Your email address will not be published. Required fields are marked *