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

CSS Hat:为PSD层元素快速生成CSS3代码

双11正版Mac软件特价秒杀+6折活动开始啦!

YoMail:针对中文用户习惯打造的邮件客户端「更新 Smart Profile 智能联系人面板功能」

MoSplash:为你打造完美无版权私藏图库

Wren:专注Tweet几十年…

Just Focus:休息是为了更好的专心工作

暂无评论
24小时热文
刚刚被浏览过的文章
软件下载频道