Darkmode.Js – 快速帮网站加入 Dark Mode 深色主题、黑暗版本、夜间模式自动转换功能

现在许多 APP 或是网站纷纷支持Dark Mode 深色主题,例如 Youtube、Chrome、Facebook Messenger... 等等,都有提供夜间模式的主题切换。

如果你想要快速帮你的网站也添加 DarK Mode 深色主题的转换功能,那么使用今天介绍的Darkmode.Js,就能帮助你快速实现一键自动转换黑暗模式的功能。 让你的网站也能像其他大企业的网站一样,可以快速的切换成夜间模式的样式。

image-20211205165012010

網站名稱:Darkmode.Js

網站連結:https://darkmodejs.learn.uno/

Darkmode.Js 教学

要利用Darkmode.Js实现 Dark Mode 深色主题功能非常简单。 首先,只需要将下列的代码加入网站当中:

 <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
 <script>
 new Darkmode().showWidget();
 </script>

加入后,你就可以使用 Darkmode.Js 当中的 Option 函数,来对你的切换按钮样式进行设定。 因此,你就能随意更改切换深色主题按钮的位置、颜色、触发时间或显示的 icon... 等等。

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

 var options = {
   bottom: '64px', // default: '32px'
   right: 'unset', // default: '32px'
   left: '32px', // default: 'unset'
   time: '0.5s', // default: '0.3s'
   mixColor: '#fff', // default: '#fff'
   backgroundColor: '#fff',  // default: '#fff'
   buttonColorDark: '#100f2c',  // default: '#100f2c'
   buttonColorLight: '#fff', // default: '#fff'
   saveInCookies: false, // default: true,
   label: '🌓', // default: ''
   autoMatchOsTheme: true // default: true
 }
 
 const darkmode = new Darkmode(options);
 darkmode.showWidget();

因此,通过以上简单的方式就能快速地替你的网站加入Dark Mode深色主题的暗黑版本模式。

Darkmode.Js with WordPress

如果你目前使用的是 WordPress 网站,那么目前也有人利用基于 Darkmode.js 开发的 WordPress 插件,让你的 WordPress 网站也能快速应用 Darkmode.js 的深色主题模式

image-20211205165309011

[c-downbtn type="default" url="https://downloads.wordpress.org/plugin/blackout-darkmode-widget.2.0.4.zip" pwd=""]Dark Mode Widget下载[/c-downbtn]

这个 WordPress 外挂都能够帮助你的 WordPress 网站快速实现基于 Darkmode.Js 的夜间模式,安装后就能马上显示切换的按钮了。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容