使用Dark Reader为网站添加夜间模式

Dark Reader 是一款能够为每一个网站启用夜间模式的浏览器扩展，它能够自动为网站启用夜间模式，当然也可以在自己的网站中使用。

一、CDN引入

我们只需要通过 jsDelivr 来把脚本引入到自己的网页中，就可以使用开发者提供的 API 了。

<!-- 引入 dark reader -->
<script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.26/darkreader.min.js"></script>
<script>
    // 随系统主题设置开启
    DarkReader.auto({
        brightness: 105,
        contrast: 95,
        sepia: 0,
        grayscale: 15
    });
</script>

二、NPM使用

NPM仓库

下载darkreader

npm i darkreader

然后就可以使用下面的代码来控制 Dark Reader 的 API

// 开启夜间模式
DarkReader.enable({
    brightness: 100,
    contrast: 90,
    sepia: 10
});

// 关闭夜间模式
DarkReader.disable();

// 随系统主题设置开启
DarkReader.auto({
    brightness: 100,
    contrast: 90,
    sepia: 10
});

// 停止监听系统主题设置
DarkReader.auto(false);

// 获取Dark Reader生成的 CSS
const CSS = await DarkReader.exportGeneratedCSS();

// 检查是否已经启用夜间模式
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();