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

Question

我正在以硬编码 CSS 的方式为我自己的网站编写暗模式脚本。几个小时后，我意识到 Dark Reader 黑暗模式比我自己编码的黑暗模式更优雅。有没有办法将该浏览器切换脚本导入到您自己的网站？深色阅读器扩展图像

Answer 1

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

您可以使用深色阅读器在您的网站上启用深色模式！

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