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

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

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

網站名稱：Darkmode.Js

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

1 Darkmode.Js 教學

2 Darkmode.Js with WordPress

2.1 相關內容

2.2 猜你喜歡

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();