Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能

SiteGround 主機 3 折優惠 + WordPress 一鍵安裝完整教學

1 分鐘閱讀

現在許多 APP 或是網站紛紛支援 Dark Mode 深色主題，例如 Youtube、Chrome、Facebook Messenger…等等，都有提供夜間模式的主題切換。

如果你想要快速幫你的網站也添加 DarK Mode 深色主題的轉換功能，那麼使用今天介紹的「Darkmode.Js」，就能幫助你快速實現一鍵自動轉換黑暗模式的功能。讓你的網站也能像其他大企業的網站一樣，可以快速的切換成夜間模式的樣式。

Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能 1

網站名稱：Darkmode.Js
網站連結：https://darkmodejs.learn.uno/

目錄隱藏

1 Darkmode.Js 教學
2 Darkmode.Js with WordPress
3 你可能有興趣
4 更多相關文章

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 的深色主題模式：

這兩個 WordPress 外掛都能夠幫助你的 WordPress 網站快速實現基於 Darkmode.Js 的夜間模式，安裝後就能馬上顯示切換的按鈕了。

讓我們來看一下在 TechMoon 網站當中的實際展示吧：

如果你想要了解更多有關 Darkmode.Js 的資訊，可以前往官網了解更多。

今天的介紹就到這裡，如果你喜歡今天的介紹，不妨幫忙分享出去，讓更多人知道。也歡迎在下方留下你的成果展示！

Darkmode.Js 教學

Darkmode.Js with WordPress

你可能有興趣

更多相關文章

讀者互動

Comments

發佈留言 取消回覆

發佈留言取消回覆