给你的网站添加 Dark Mode
作者: Mac玩儿法编辑部 发布时间: 2019-07-01 #Dark Mode

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

给你的网站添加 Dark 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>

给你的网站添加 Dark Mode插图(1)

然后你可以用 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();

来看看我站的演示:

给你的网站添加 Dark Mode插图(2)

Darkmode.js 官网

HomePod 即将在国区发售,同时更新 iOS 12.1.1 首次添加中文 Siri

Piiic 2:超好用的长图制作工具

Squeed:编辑歌曲元数据竟然能如此简单?

Pimp Your Screen:壁纸控必备

Screenlapse:自动定期给网站做截图

Wikibot:维基迷必备Mac客户端

暂无评论