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

利益接露：您好，在你訪問我們的文章內容時，我們希望保持公開透明， TechMoon 是一個網站，由於不投放廣告的緣故，我們的收益來源大部分是來自聯盟傭金。因此，在某些部分文章當中的某些連結是屬於聯盟連結。當你從網站中的連結購買產品或服務時，我們將可以獲得一小部分的傭金作為獎勵。但是這並不會影響你的權益，你不會因此付出額外的費用，相反的，在絕大部分中，你更可以從透過我們的連結來獲得更多的折扣優惠。感謝你的支持。

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. 更多相關文章

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 深色主題的暗黑版本模式。