Darkmode.Js – 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能
Tags: darkmodejs
Published: 2019-08-16 01:20:24


現在許多 APP 或是網站紛紛支援  **[Dark Mode 深色主題](https://techmoon.xyz/darkmode/)**，例如 Youtube、Chrome、Facebook Messenger…等等，都有提供**夜間模式的主題切換**。

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

![Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能 1](https://res.cloudinary.com/practicaldev/image/fetch/s--d-toqjZt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i.imgur.com/vzexItp.gif "Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能 2")

網站名稱：Darkmode.Js  
網站連結：[https://darkmodejs.learn.uno/](https://darkmodejs.learn.uno/?ref=techmoon)

**目錄**

[1  Darkmode.Js 教學](https://techmoon.xyz/darkmode/#DarkmodeJs_jiao_xue)

[2  Darkmode.Js with WordPress](https://techmoon.xyz/darkmode/#DarkmodeJs_with_WordPress)

[2.1  相關內容](https://techmoon.xyz/darkmode/#xiang_guan_nei_rong)

[2.2  猜你喜歡](https://techmoon.xyz/darkmode/#cai_ni_xi_huan)

## Darkmode.Js 教學

要利用  [Darkmode.Js](https://techmoon.xyz/darkmode/)  實現 Dark Mode 深色主題功能非常簡單。首先，只需要將下列的程式碼加入網站當中：

```html
<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 等等元素。

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

[Dark Mode for WordPress](https://wordpress.org/plugins/darkmode/ "WordPress.org Plugin Page")

[](https://wordpress.org/plugins/darkmode/ "WordPress.org Plugin Page")

Author(s):  [Optimocha](https://optimocha.com/)

Current Version:  1.0.0

Last Updated:  2019-06-26

[darkmode.1.0.0.zip](https://downloads.wordpress.org/plugin/darkmode.1.0.0.zip "Direct download")

[80%_Ratings_](https://wordpress.org/support/view/plugin-reviews/darkmode "Ratings")[10+_Installs_](https://downloads.wordpress.org/plugin/darkmode.1.0.0.zip "Direct download")[WP 2.1+_Requires_](https://wordpress.org/plugins/darkmode/ "WordPress.org Plugin Page")

[![Blackout: Dark Mode Widget](https://ps.w.org/blackout-darkmode-widget/assets/banner-772x250.png?rev=2113977 "Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能 3")Blackout: Dark Mode Widget](https://wordpress.org/plugins/blackout-darkmode-widget/ "WordPress.org Plugin Page")

[](https://wordpress.org/plugins/blackout-darkmode-widget/ "WordPress.org Plugin Page")

Author(s):  [José Sotelo](https://inboundlatino.com/)

Current Version:  1.2.0

Last Updated:  2019-08-13

[blackout-darkmode-widget.zip](https://downloads.wordpress.org/plugin/blackout-darkmode-widget.zip "Direct download")

[100%_Ratings_](https://wordpress.org/support/view/plugin-reviews/blackout-darkmode-widget "Ratings")[60+_Installs_](https://downloads.wordpress.org/plugin/blackout-darkmode-widget.zip "Direct download")[WP 4.7+_Requires_](https://wordpress.org/plugins/blackout-darkmode-widget/ "WordPress.org Plugin Page")

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

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

![é»‘æš—æ¨¡å¼ GIF](https://media.giphy.com/media/KEf9KHwdwd1352rICi/giphy.gif "Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能 4")

如果你想要了解[更多有關 Darkmode.Js 的資訊，可以前往官網了解更多。](https://darkmodejs.learn.uno/?ref=techmoon)

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