为您自己的网站使用 Dark Reader 扩展代码答案

【问题标题】：Using Dark Reader extension code for your own website为您自己的网站使用 Dark Reader 扩展代码
【发布时间】：2020-07-08 15:03:42
【问题描述】：

我正在使用硬编码 CSS 方式为我自己的网站编写暗模式脚本。几个小时后，我意识到 Dark Reader 暗模式比我自己的编码暗模式更优雅。有没有办法将该浏览器切换脚本导入您自己的网站？dark reader extension image

【问题讨论】：

是的，有一种方法，但这不是一个好主意，因为它比自己做方法更难，而且对你的用户来说也不是很好，因为浏览器需要下载大量代码，导致页面变慢。

标签： javascript css google-chrome-extension

【解决方案1】：

Dark Reader 有一个官方 NPM 包，您可以使用它在您的网站上启用暗模式：https://www.npmjs.com/package/darkreader。解压后的包大小目前只有 191 KB。

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

从 NPM (npm install darkreader) 安装包
或从源代码构建 (npm run api)
或通过 CDN 包含脚本，例如 unpkg 或 jsDelivr

然后使用下面的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();

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

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

【讨论】：