Dark Reader网页黑暗模式转换扩展-技术圈

Dark Reader网页黑暗模式转换扩展

联合创作 · 2023-09-29 02:30

Dark Reader 是一个开源的浏览器扩展，旨在分析网页。根据其分析，Dark Reader 将生成一种旨在减少用户眼睛疲劳的黑暗模式。Dark Reader 功能丰富，可以在整个 UI 中以多种方式进行配置。

构建使用

安装 Node.js LTS，下载源代码（或从 git 中 check out）。
在根文件夹中打开终端并运行：

npm install
npm run build

这将生成一个build/release/darkreader-chrome.zip可在基于 Chromium 的浏览器中使用的文件以及一个可在 Firefox 中使用的build/release/darkreader-firefox.xpi文件。

为网站使用 Dark Reader

你可以使用 Dark Reader 在你的网站上启用黑暗模式！

从 NPM ( npm install darkreader) 安装包
或从源代码构建 ( npm run api)

然后就可以使用下面的代码来控制 Dark Reader 的 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();

...或者如果正在使用 ES 模块

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

编辑分享