Hostinger 1.2 折主機優惠 + WordPress 一鍵安裝完整教學

目次隱藏

1 Darkmode.Js 教學
2 Darkmode.Js with WordPress
3 相關內容
4 延伸閱讀

1 分鐘閱讀

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

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

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

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