使用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

1	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 {
  exportGeneratedCSS as collectCSS,
  disable as disableDarkMode,
  enable as enableDarkMode,
  auto as followSystemColorScheme,
  isEnabled as isDarkReaderEnabled
} from 'darkreader'

enableDarkMode({
  brightness: 100,
  contrast: 90,
  sepia: 10
})

disableDarkMode()

followSystemColorScheme()

const CSS = await collectCSS()

const isEnabled = isDarkReaderEnabled()