darkreader 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
darkreader 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
darkreader 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT License
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
地区 不详
投 递 者 首席测试
适用人群 未知
收录时间 2021-11-23


Dark Reader's mascot

Dark Reader analyzes web pages and aims to reduce the eyestrain while you browse the web.

Chrome Web Store Firefox Add-ons Apple App Store Edge Addons Thunderbird

Dark Reader

Dark Reader is an open-source MIT-licensed browser extension that is designed to analyze web pages. Based on its analysis, Dark Reader will generate a dark mode that aims to reduce the eyestrain of the user. Dark Reader is feature-rich and can be configured in many ways throughout the UI.


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

    brightness: 100,
    contrast: 90,
    sepia: 10


// Enable when the system color scheme is dark.
    brightness: 100,
    contrast: 90,
    sepia: 10

// Stop watching for the system color scheme.

// 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';

    brightness: 100,
    contrast: 90,
    sepia: 10,



const CSS = await collectCSS();

const isEnabled = isDarkReaderEnabled();

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, under Settings -> Manage Settings.


Dark Reader exists thanks to all the people who have contributed to Dark Reader!


Thank you to all our generous backers! Support Dark Reader by Becoming a backer


Does your company use Dark Reader? Ask your manager or the marketing team if your company would be interested in supporting our project. By supporting this project, it will allow the maintainers to dedicate more time for maintenance and new features for everyone. Also, your company's logo will show on GitHub - who doesn't want a little extra exposure? Here's the info.

Thank you to our wonderful sponsors!



评论 (0)

0 评论
0 收藏