Dark Reader 是一款能够为每一个网站启用夜间模式的浏览器扩展,它能够自动为网站启用夜间模式,当然也可以在自己的网站中使用。
一、CDN引入 我们只需要通过 jsDelivr 来把脚本引入到自己的网页中,就可以使用开发者提供的 API 了。
1 2 3 4 5 6 7 8 9 10 11 <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
然后就可以使用下面的代码来控制 Dark Reader 的 API
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 DarkReader .enable ({ brightness : 100 , contrast : 90 , sepia : 10 }); DarkReader .disable ();DarkReader .auto ({ brightness : 100 , contrast : 90 , sepia : 10 }); DarkReader .auto (false );const CSS = await DarkReader .exportGeneratedCSS ();const isEnabled = DarkReader .isEnabled ();
如果您使用的是 ES 模块
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 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 ();