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

Knock:用iPhone解锁Mac的新玩法

Apple Podcast 将开放节目数据分析,造福播客制作者

十款经典的 Mac 界面个性化设置软件

Level.5:构建自己的网络加速引擎

Piano Prodigy:教孩子弹钢琴

Downie:OS X 超级视频下载王

暂无评论
24小时热文
软件下载频道