给你的网站添加 Dark Mode

现在 macOS、iOS 都支持 Dark Mode,我们的网站也要紧跟设计潮流,使用 Darkmode.js 这款 js 脚本即可轻松完成 dark-mode / night-mode 的一秒切换。

只需要将下面的代码放入网页代码里即可。

  1. <script src=”https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js”></script>
  2. <script>
  3. new Darkmode().showWidget();
  4. </script>

然后你可以用 option 代码对模式切换按钮的样式、位置进行个性化设置,比如左还是右,底色、触发时间、里面的 icon 等等元素。

  1. var options = {
  2. bottom: ’64px’, // default: ’32px’
  3. right: ‘unset’, // default: ’32px’
  4. left: ’32px’, // default: ‘unset’
  5. time: ‘0.5s’, // default: ‘0.3s’
  6. mixColor: ‘#fff’, // default: ‘#fff’
  7. backgroundColor: ‘#fff’, // default: ‘#fff’
  8. buttonColorDark: ‘#100f2c’, // default: ‘#100f2c’
  9. buttonColorLight: ‘#fff’, // default: ‘#fff’
  10. saveInCookies: false, // default: true,
  11. label: ‘?’ // default: ” }
  12. const darkmode = new Darkmode(options); darkmode.showWidget();

来看看我站的演示:

Darkmode.js 官网

评论