CODEWITHSUNDEEP
javascriptcssgoogle-chrome-extension
Milad
Milad

Reputation: 63

Using Dark Reader extension code for your own website

I was scripting dark mode for my own website the hard-code CSS way. And after a couple of hours, I realized the Dark Reader dark mode is more elegant than my own coded dark mode. Is there a way to import that browser toggle script to your own website?dark reader extension image

Upvotes: 1

Views: 3418

Answers (1)

mic
mic

Reputation: 1266

Dark Reader has an official NPM package which you can use to enable dark mode on your website: https://www.npmjs.com/package/darkreader. The unpacked size of the package is currently just 191 KB.

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 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);

// Get the generated CSS of Dark Reader returned as a string.
const CSS = await DarkReader.exportGeneratedCSS();

... or if you are using ES modules

import {
    enable as enableDarkMode,
    disable as disableDarkMode,
    auto as followSystemColorScheme,
    exportGeneratedCSS as collectCSS,
} from 'darkreader';

enableDarkMode({
    brightness: 100,
    contrast: 90,
    sepia: 10,
});

disableDarkMode();

followSystemColorScheme();

const CSS = await collectCSS();

Upvotes: 5

Related Questions