現在許多 APP 或是網站紛紛支援 Dark Mode 深色主題,例如 Youtube、Chrome、Facebook Messenger…等等,都有提供夜間模式的主題切換。
如果你想要快速幫你的網站也添加 DarK Mode 深色主題的轉換功能,那麼使用今天介紹的「Darkmode.Js」,就能幫助你快速實現一鍵自動轉換黑暗模式的功能。讓你的網站也能像其他大企業的網站一樣,可以快速的切換成夜間模式的樣式。

網站名稱:Darkmode.Js
網站連結:https://darkmodejs.learn.uno/
Darkmode.Js 教學
要利用 Darkmode.Js 實現 Dark Mode 深色主題功能非常簡單。首先,只需要將下列的程式碼加入網站當中:
加入後,你就可以使用 Darkmode.Js 當中的 Option 函數,來對你的切換按鈕樣式進行設定。因此,你就能隨意更改切換深色主題按鈕的位置、顏色、觸發時間或顯示的 icon…等等。
然後你可以用option 代碼對模式切換按鈕的樣式、位置進行個性化設置,比如左還是右,底色、觸發時間、裡面的icon 等等元素。
因此,透過以上簡單的方式就能快速地替你的網站加入 Dark Mode 深色主題的暗黑版本模式。
Darkmode.Js with WordPress
如果你目前使用的是 WordPress 網站,那麼目前也有人利用基於 Darkmode.js 開發的 WordPress 外掛,讓你的 WordPress 網站也能快速應用 Darkmode.js 的深色主題模式:
這兩個 WordPress 外掛都能夠幫助你的 WordPress 網站快速實現基於 Darkmode.Js 的夜間模式,安裝後就能馬上顯示切換的按鈕了。
讓我們來看一下在 TechMoon 網站當中的實際展示吧:

如果你想要了解更多有關 Darkmode.Js 的資訊,可以前往官網了解更多。
今天的介紹就到這裡,如果你喜歡今天的介紹,不妨幫忙分享出去,讓更多人知道。也歡迎在下方留下你的成果展示!
你可能有興趣
- Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
- Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
- Humanotion – 免費 192 個 Avatar 頭像與 6 種不同背景,採 CC0 許可授權可商用大頭貼圖像
- Adobe Photoshop Express – 免費線上圖片編輯服務,提供圖片裁切、調整大小、修飾與套用濾鏡效果
- Wunderstock – 超過 1 千萬 CC0 免費圖片,提供壓縮後圖片與免費線上圖片編輯工具
- Diff Checker Text – 免費線上檢查文字或檔案不同之處,可支援文字、圖片、PDF 檔案、Excel 檔案多種格式
- Logaster – 免費 Logo 線上產生器,一秒建立網站 Logo 與 Favicon 打造獨特品牌 Logo 圖示
- Lens – Mac 免費開源圖片格式轉換工具,可批次處理大量圖片支援 JPG、PNG 與 GIF 格式
- 【WordPress 付費主題免費下載】Bufet – Multi Concept Software & App Landing WordPress Theme + RTL
- 【WordPress 付費主題免費下載】Danni — Minimalist WordPress Blog Theme
- Free Deca UI Kit – 簡潔 UI Kit 素材免費下載,提供 Figma 與 Sketch 設計軟體格式
- OFFF.to – 無須註冊免費縮短網址服務,可直接在網址列當中縮短網址並獲得分析數據
如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!
你好如何取得NOD32序號
Hi 枝青,
可以參考這篇文章哦:https://techmoon.xyz/nod32key/