This extension inverts brightness of web pages and aims to reduce eyestrain while browsing the web. Visit Chrome Web Store and Firefox Add-ons for more info.
Donate via Open Collective.
Improve or suggest a translation here. See the list of supported language codes.
If some website is already dark (has all pages dark by default), you can add it to dark-sites.config file (please, preserve alphabetical order).
If some parts of web-pages are wrongly inverted, you can specify necessary CSS selectors at dynamic-theme-fixes.config file (for Dynamic Theme mode) or inversion-fixes.config file (for Filter and Filter+ modes) (please, preserve alphabetical order by URL, use short selectors, preserve code style).
Please note, that merged changes to these files are automatically delivered to all users within 15 minutes. Config syncing was disabled, cause the GitHub team doesn’t allow using GitHub as a CDN. Storing these files and making requests to other resources will be expensive and look suspicious.
Dev Tools should be used to fix minor issues on a web page (like dark icon on a dark background, removing bright background, adding a white background to transparent image, etc.). If the page looks partially dark and bright in Dynamic mode, it should be considered as a bug. For Filter mode it is a common practice to invert already dark page parts.
class="icon small"
selector may look like .icon
).dynamic-theme-fixes.config
================================
example.com
INVERT
.icon
CSS
.wrong-element-colors {
background-color: ${white} !important;
color: ${black} !important;
}
INVERT
rule inverts specified elements. For Dynamic mode use INVERT
only for dark images, that are invisible on dark backgrounds (icons, diagrams, charts, <img>
and <svg>
elements).CSS
rule adds custom CSS to a web page. !important
keyword should be specified for each CSS property to prevent overrides by other stylesheets. Dynamic mode supports ${COLOR}
template, where COLOR
is a color value before the inversion (white
will become black
in dark mode).INVERT
section. If inverted element contains images or other content that becomes wrongly displayed, NO INVERT
rule can be used. REMOVE BG
removes background image from element and forces black background.inversion-fixes.config
================================
example.com
INVERT
.icon
.button
#player
NO INVERT
#player *
REMOVE BG
.bg-photo
CSS
.overlay {
background: rgba(255, 255, 255, 0.5);
}
If you would like to add new feature to Dark Reader or fix a bug, submit an issue in GitHub (if there is no existing one), discuss it with active contributors, wait for approval.
To build and debug the extension install the Node.js LTS. Install development dependencies by running npm install
in the project root folder. Then execute npm run debug
.
Open the chrome://extensions
page. Disable the official Dark Reader version. Enable the Developer mode. Click Load unpacked extension button, navigate to the project’s debug/
folder.
Open about:addons
page. Disable the official Dark Reader version. Open about:debugging#addons
page. Click Load Temporary Add-on button, open debug-firefox/manifest.json
file.
After making any code changes the project will be automatically recompiled. If the extension didn’t reload automatically it can be reloaded manually on the extensions page.
For editing the code you can use any text editor or web IDE (like Visual Studio Code, Atom, WebStorm). Preserve code style (whitespaces etc).
Run tests by executing the npm test
.
Submit a pull request, wait for review.
You can install the extension from a file. Install Node.js LTS. Download the source code (or check out from git). Open terminal in root folder and run:
npm install
npm run release
This will generate build.zip
for use in Chromium browsers and build-firefox.xpi
for use in Firefox.
You can use Dark Reader to enable dark mode on your website. Install the package from NPM (npm install darkreader
) or include the script via a CDN such as:
Then use the following API
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
DarkReader.disable();
// Enable when system color scheme is dark
DarkReader.auto({
brightness: 100,
contrast: 90,
sepia: 10
});
// Stop watching for system color scheme
DarkReader.auto(false);
… or if you are using ES modules
import {
enable as enableDarkMode,
disable as disableDarkMode,
auto as followSystemColorScheme,
} from 'darkreader';
enableDarkMode({
brightness: 100,
contrast: 90,
sepia: 10,
});
disableDarkMode();
followSystemColorScheme();
#javascript #webdev