在您的网站上启用深色模式

如何在网站上实现深色模式？

我将使用darkreader npm 库，它拥有超过 7.5K 个 star。

您可以使用 Dark Reader 在您的网站上启用深色模式。

从 NPM 安装该软件包

npm install darkreader

你可以从 darkreader 导入 es 模块到你的主文件中。

import { enable, disable } from 'darkreader';

启用 - 为当前网页启用深色模式
禁用 - 为当前网页禁用深色模式

要在您的网站上启用深色模式，只需enable()在您的文件中添加调用函数即可。

此外，您还可以通过在 enable 方法中传递参数来自定义一些过滤器。

例如，

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

它支持以下参数，您可以使用这些参数。

• 模式：0 | 1
  • 1 - 深色模式，0 - 暗光模式
• [亮度 | 灰度 | 对比度 | 棕褐色]：数值
  • 值（0 - 100+）
  • 默认值 [ 100 | 0 | 100 | 0 ]
• useFont：布尔值
  • 指定是否应使用自定义字体。
  • 默认值为 false
• fontFamily: string
  • 使用的字体系列
• 文本笔画：数字
  • 使文本看起来更粗（0-1像素）
  • 默认值 0
• darkSchemeBackgroundColor：字符串
  • 用于深色模式的背景颜色
  • 默认值 #181a1b
• darkSchemeTextColor：字符串
  • 深色模式下使用的文本颜色
  • 默认值 #e8e6e3
• lightSchemeBackgroundColor：字符串
  • 浅色模式使用的背景颜色
  • 默认值 #dcdad7
• lightSchemeTextColor：字符串
  • 浅色模式下使用的文本颜色
  • 默认值 #181a1b
• scrollbarColor：字符串
  • 滚动条颜色
  • 默认自动
• selectionColor：字符串
  • 选择颜色
  • 默认自动

资源

https://github.com/darkreader/darkreader