@umijs/ssr-darkreader
v4.9.45
Published
Dark mode for every website
Downloads
36,050
Readme
Questions
Most questions can be answered by reading the help page. If the help page doesn't answer your question, open up a new discussion.
How to contribute
Read more about contributing to Dark Reader in CONTRIBUTING.md.
Building for use
You can install the extension from a file.
Install Node.js LTS. Download the source code (or check out from git).
Open terminal in the root folder and run:
npm install
npm run build
This will generate a build/release/darkreader-chrome.zip
file that is useable in a Chromium-based browser and also a build/release/darkreader-firefox.xpi
file that is useable in Firefox.
Using Dark Reader for a website
You can use Dark Reader to enable dark mode on your website!
- Install the package from NPM (
npm install darkreader
) - or build from the source code (
npm run api
) - or include the script via a CDN such as unpkg or jsDelivr
Then you can use the following code to control Dark Reader's API
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
DarkReader.disable();
// Enable when the system color scheme is dark.
DarkReader.auto({
brightness: 100,
contrast: 90,
sepia: 10
});
// Stop watching for the system color scheme.
DarkReader.auto(false);
// Get the generated CSS of Dark Reader returned as a string.
const CSS = await DarkReader.exportGeneratedCSS();
// Check if Dark Reader is enabled.
const isEnabled = DarkReader.isEnabled();
... or if you are using ES modules
import {
enable as enableDarkMode,
disable as disableDarkMode,
auto as followSystemColorScheme,
exportGeneratedCSS as collectCSS,
isEnabled as isDarkReaderEnabled
} from 'darkreader';
enableDarkMode({
brightness: 100,
contrast: 90,
sepia: 10,
});
disableDarkMode();
followSystemColorScheme();
const CSS = await collectCSS();
const isEnabled = isDarkReaderEnabled();
Be aware, that darkreader will add the chrome
object onto the window
object, these are to stub certain functions that
the code will use. They originate from the webextension-api.
Site fixes
Automatically syncing the site fixes to every Dark Reader user was disabled because the GitHub team doesn't allow using GitHub as a CDN. Storing these files and making requests to other resources would be expensive and look suspicious. As such, changes are included with each new Dark Reader release.
However, this can be enabled by the following steps:
- Click on the Dark Reader icon.
- Click on the Dev tools button (in the bottom-right corner).
- Click on the Preview new design button.
- Enable the
Synchronize site fixes
setting, underSettings -> Manage Settings
.