darkreader-api v0.2.0

darkreader-api 🌘🌜

Dark Reader API for developers. Dynamically darken your browser-based app without changing CSS.

Quickly create a dark theme for simple apps, prototypes and save time - it is dynamically generated from you current (light) theme.

Also works for Electron apps.

Based on the browser extension Dark Reader.

Try it out! (codesandbox w/ sources)

Note: You only see appropriate styles in codesandbox's 'open in new window' mode (bold link).

Installation

npm

npm i darkreader-api

GitHub

npm i github:ford04/darkreader-api#v<version>

# e.g.
npm i github:ford04/darkreader-api#v0.1.0

# latest from master
npm i github:ford04/darkreader-api

Build

npm install

will also trigger build via prepare hook. The resulting js-bundle is main.js in /dist folder.

Usage

The API supports dynamic theme mode from Dark Reader - just call enableDynamicTheme(). Without additional options, most websites already look really good from my experience. If you want to reset to your original style and/or clear up resources used by Dark Reader (e.g. MutationObserver), invoke disableDynamicTheme(). It is idempotent and can be called without having to check if dynamic theme has been enabled before.

Basic example

const { enableDynamicTheme, disableDynamicTheme } = require("darkreader-api")

if(youFeelPowerOfTheDarkSide()){
  enableDynamicTheme()
} else {
  // idempotent
  disableDynamicTheme()
}

Options

FilterConfig Example

import {enableDynamicTheme, disableDynamicTheme, defaultFilterConfig } from "darkreader-api"

enableDynamicTheme({
  filterConfig: { ...defaultFilterConfig, brightness: 300 }
})

Its useful to just incrementally add what you need to the default config.

const defaultFilterConfig: Readonly<FilterConfig> = {
  mode: 1,
  brightness: 100,
  contrast: 100,
  grayscale: 0,
  sepia: 0,
  useFont: false,
  fontFamily: isMacOS()
    ? "Helvetica Neue"
    : isWindows()
    ? "Segoe UI"
    : "Open Sans",
  textStroke: 0,
  engine: ThemeEngines.dynamicTheme,
  stylesheet: ""
};

DynamicThemeFix Example

  // ... imports

  enableDynamicTheme({
    dynamicThemeFix: {
      url: [<your-domain.com>],
      css: `
      #myElementSelector {
        background-color: limegreen !important;
      }
      /* ... and more CSS */
      `,
      invert: ["#myInvertedElementSelector"]
    }
  });

In its current form the DynamicThemeFix API is a bit leaned towards Dark Reader and not ideal yet. E.g. the url parameter makes more sense in the context of the browser extension. Just hand in only one item in the array with your website host, like localhost:1234. Or you could read it from window.location.host. Future releases will tune this up.

Notes

• Due to the nature of darkreader extension, some things like used global variables had to be stubbed out.
• To increase code quality of this package, I proposed some architecture change in the Dark Reader repository here.
• API is currently based on version 4.7.12 introduced by commit 0de8d24 of Dark Reader.

Disclaimer

I am not the original author of Dark Reader. Links/Credits to the browser extension: Website, GitHub