Dark Reader API

- Use as `DarkReader.enable()`
- Fixed darkreader#1287
- Fixed darkreader#1315

.gitignore

@@ -6,6 +6,7 @@ build.zip
 build-firefox
 debug-firefox
 build-firefox.xpi
+darkreader.js
 
 # Node.js modules
 #-----------------------------------

.npmignore

@@ -0,0 +1,5 @@
+*
+
+!darkreader.js
+!index.d.ts
+!LICENSE

README.md

@@ -146,6 +146,37 @@ Open terminal in root folder and run:
 
 This will generate `build.zip` for use in Chromium browsers and `build-firefox.xpi` for use in Firefox.
 
+## Using for a website
+
+You can use Dark Reader to enable dark mode on your website.
+Install the package from NPM (`npm install darkreader`)
+or download from CDN like `https://unpkg.com/darkreader`.
+Then use the following API
+```javascript
+DarkReader.enable({
+    brightness: 100,
+    contrast: 90,
+    sepia: 10
+});
+
+DarkReader.disable();
+```
+... or if you are using ES modules
+```javascript
+import {
+    enable as enableDarkMode,
+    disable as disableDarkMode,
+} from 'darkreader';
+
+enableDarkMode({
+    brightness: 100,
+    contrast: 90,
+    sepia: 10,
+});
+
+disableDarkMode();
+```
+
 ## Contributors
 
 This project exists thanks to all the people who contribute

index.d.ts

@@ -0,0 +1,86 @@
+declare namespace DarkReader {
+    /**
+     * Enables dark mode for current web page.
+     * @param theme Theme options.
+     * @param fixes Fixes for the generated theme.
+     * @param isIFrame This flag should be enabled if the dark mode was enabled on a parent web page (where the current page is an IFrame).
+     */
+    function enable(theme: Partial<Theme>, fixes?: DynamicThemeFix, isIFrame?: boolean): void;
+
+    /**
+     * Disables dark mode for current web page.
+     */
+    function disable(): void;
+
+    /**
+     * Theme options.
+     */
+    interface Theme {
+        /**
+         * 1 - dark mode, 0 - dimmed mode.
+         * Default 1.
+         */
+        mode: 0 | 1;
+        /**
+         * Brightness (0 - 100+).
+         * Default 100.
+         */
+        brightness: number;
+        /**
+         * Contrast (0 - 100+).
+         * Default 100.
+         */
+        contrast: number;
+        /**
+         * Grayscale (0 - 100).
+         * Default 0.
+         */
+        grayscale: number;
+        /**
+         * Sepia (0 - 100).
+         * Default 0.
+         */
+        sepia: number;
+        /**
+         * Specifies if custom font should be used.
+         * Default false.
+         */
+        useFont: boolean;
+        /**
+         * Font family to use.
+         */
+        fontFamily: string;
+        /**
+         * Makes text look bolder (0 - 1px).
+         * Default 0.
+         */
+        textStroke: number;
+    }
+
+    /**
+     * Contains fixes for the generated theme.
+     */
+    interface DynamicThemeFix {
+        /**
+         * List of CSS selectors that should be inverted.
+         * Usually icons that are contained in sprites.
+         */
+        invert: string[];
+        /**
+         * Additional CSS.
+         * ${color} template should be used to apply theme options to a color.
+         * Example:
+         * ```
+         * body {
+         *     background-color: ${white} !important;
+         *     background-image: none !important;
+         * }
+         * ```
+         */
+        css: string;
+    }
+}
+
+declare module 'darkreader' {
+    export = DarkReader;
+}

package.json

@@ -3,12 +3,14 @@
   "version": "4.7.14",
   "description": "Dark theme for every website",
   "scripts": {
-    "code-style": "eslint --fix 'src/**/*.ts' 'src/**/*.tsx' 'tasks/**/*.js' 'tests/**/*.ts'",
+    "api": "node -e \"require('./tasks/bundle-api')()\"",
+    "code-style": "eslint --fix 'src/**/*.ts' 'src/**/*.tsx' 'tasks/**/*.js' 'tests/**/*.ts' 'index.d.ts'",
     "debug": "node tasks/debug.js",
+    "prepublishOnly": "npm test && npm run api",
     "release": "npm test && node tasks/release.js",
     "test": "jest --config=tests/jest.config.js"
   },
-  "private": true,
+  "main": "darkreader.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/alexanderby/darkreader.git"

src/api/chrome.ts

@@ -0,0 +1,13 @@
+if (!window.chrome) {
+    window.chrome = {} as any;
+}
+if (!window.chrome.runtime) {
+    window.chrome.runtime = {
+        sendMessage() {
+            throw new Error('Access to some of your resources was blocked by cross-origin policy');
+        },
+        onMessage: {
+            addListener: Function.prototype,
+        },
+    } as any;
+}

src/api/index.ts

@@ -0,0 +1,31 @@
+import './chrome';
+import {FilterConfig as Theme, DynamicThemeFix} from '../definitions';
+import ThemeEngines from '../generators/theme-engines';
+import {createOrUpdateDynamicTheme, removeDynamicTheme} from '../inject/dynamic-theme';
+
+const defaultTheme: Theme = {
+    mode: 1,
+    brightness: 100,
+    contrast: 100,
+    grayscale: 0,
+    sepia: 0,
+    useFont: false,
+    fontFamily: '',
+    textStroke: 0,
+    engine: ThemeEngines.dynamicTheme,
+    stylesheet: '',
+};
+
+export function enable(themeOptions: Partial<Theme>, fixes: DynamicThemeFix = null, isIFrame = false) {
+    const theme = {...defaultTheme, ...themeOptions};
+
+    if (theme.engine !== ThemeEngines.dynamicTheme) {
+        throw new Error('Theme engine is not supported');
+    }
+
+    createOrUpdateDynamicTheme(theme, fixes, isIFrame);
+}
+
+export function disable() {
+    removeDynamicTheme();
+}

tasks/bundle-api.js

@@ -0,0 +1,45 @@
+const rollup = require('rollup');
+const rollupPluginCommonjs = require('rollup-plugin-commonjs');
+const rollupPluginNodeResolve = require('rollup-plugin-node-resolve');
+const rollupPluginReplace = require('rollup-plugin-replace');
+const rollupPluginTypescript = require('rollup-plugin-typescript2');
+const typescript = require('typescript');
+const packageJSON = require('../package.json');
+
+async function bundleAPI() {
+    const src = 'src/api/index.ts';
+    const dest = 'darkreader.js';
+
+    const bundle = await rollup.rollup({
+        input: src,
+        plugins: [
+            rollupPluginNodeResolve(),
+            rollupPluginCommonjs(),
+            rollupPluginTypescript({
+                typescript,
+                tsconfig: 'src/tsconfig.json',
+                tsconfigOverride: {
+                    compilerOptions: {
+                        removeComments: true,
+                        target: 'es5',
+                    },
+                },
+                clean: true,
+                cacheRoot: null,
+            }),
+            rollupPluginReplace({
+                '__DEBUG__': 'false',
+            }),
+        ].filter((x) => x)
+    });
+    await bundle.write({
+        banner: `/**\n * Dark Reader v${packageJSON.version}\n * https://darkreader.org/\n */\n`,
+        file: dest,
+        strict: true,
+        format: 'umd',
+        name: 'DarkReader',
+        sourcemap: false,
+    });
+}
+
+module.exports = bundleAPI;