• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
TechMoon 科技月球

TechMoon 科技月球

免費工具、WordPress、虛擬主機、 科技前端

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • A2 Hosting 主機
  • WordPress
    • WordPress 教學
    • WordPress 主題
    • WordPress 外掛
  • 免費資源
  • 優惠資訊
  • 自我提升
    • Excel 教學
    • 網路行銷
  • Udemy 免費課程
  • 虛擬主機總覽
目前位置: 首頁 / WordPress / WordPress 外掛 / Darkmode.Js – 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能
Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能

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

Last Updated on 2019-08-16 By Sliven 2 Comments

利益接露:當你從網站中的連結購買產品或服務時,某些連結可以讓我們獲得收入。
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
1 分鐘閱讀

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

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

Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能 1
網站名稱:Darkmode.Js
網站連結:https://darkmodejs.learn.uno/
目錄
  1. 1. Darkmode.Js 教學
  2. 2. Darkmode.Js with WordPress
  3. 3. 你可能有興趣
  4. 4. 更多相關文章

Darkmode.Js 教學

要利用 Darkmode.Js 實現 Dark Mode 深色主題功能非常簡單。首先,只需要將下列的程式碼加入網站當中:

HTML

加入後,你就可以使用 Darkmode.Js 當中的 Option 函數,來對你的切換按鈕樣式進行設定。因此,你就能隨意更改切換深色主題按鈕的位置、顏色、觸發時間或顯示的 icon…等等。

然後你可以用option 代碼對模式切換按鈕的樣式、位置進行個性化設置,比如左還是右,底色、觸發時間、裡面的icon 等等元素。

JS

因此,透過以上簡單的方式就能快速地替你的網站加入 Dark Mode 深色主題的暗黑版本模式。

Darkmode.Js with WordPress

如果你目前使用的是 WordPress 網站,那麼目前也有人利用基於 Darkmode.js 開發的 WordPress 外掛,讓你的 WordPress 網站也能快速應用 Darkmode.js 的深色主題模式:

Item not found:“darkmode”does not exist.
Blackout: Dark Mode Widget Blackout: Dark Mode Widget

Author(s): José Sotelo

Current Version: 2.0.4

Last Updated: 2020-12-13

blackout-darkmode-widget.2.0.4.zip

94%Ratings 600+Installs WP 4.7+Requires

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

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

黑暗模式 GIF

如果你想要了解更多有關 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 – 無須註冊免費縮短網址服務,可直接在網址列當中縮短網址並獲得分析數據

更多相關文章

  • Trace - 免費線上快速去背工具,提供內建背景能替換去背後的背景圖片
  • Ivacy VPN - 每月只需 $1,跨區觀看 Netflix 與翻牆的強大 VPN 軟體連線工具服務!
  • Feedly - 超好用的 RSS 免費訂閱服務完整攻略,讓你隨時接收訂閱網站的最新消息
  • Miny.app - 免費線上縮短網址服務,高度注重隱私與免費自定義 URL!
  • EasyPDF 免費線上轉檔服務,無上傳大小、次數、數量的限制,整合 Google Drive 與 Dropbox 的超強雲端服務
  • Algolia - 替代 Google Custom Search Engine 與網站內建搜尋功能的新選擇
  • LambdaTest - 瀏覽器相容性測試工具,檢測你的網站在所有平台裝置上的相容性
  • 1.1.1.1 最快速最安全的 DNS 服務,CloudFlare 加速你的上網速度與網路安全性
  • Simple Ops - 免費網站運行監測線上工具,即時紀錄網站性能與提供警報,隨時提醒網站運行狀態
  • YoutubeDLD - 一鍵免費下載 Youtube 影片,在網址加上 DLD 即可 Download
  • Facebook 分享偵錯工具 - Facebook Debug 官方工具,幫你更新已分享貼文的內容資訊
  • 全新 Microsoft Office APP - 整合 Word、Excel、PowerPoint 於一身免費使用

如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!

所屬分類: WordPress 外掛, 免費資源 標籤: Dark Mode, Darkmode.Js, 夜間模式, 深色主題, 黑暗模式

關於 Sliven

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

讀者互動

Comments

  1. 吳枝青 says

    2019-08-18 at 08:37:38

    你好如何取得NOD32序號

    回覆
    • Sliven 褚崇名 says

      2019-08-19 at 06:43:04

      Hi 枝青,

      可以參考這篇文章哦:https://techmoon.xyz/nod32key/

      回覆

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
  • Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
  • Humanotion – 免費 192 個 Avatar 頭像與 6 種不同背景,採 CC0 許可授權可商用大頭貼圖像
  • G Suite 教育版更名為 Google Workspace for Education,並取消無限制儲存空間限制至 100 TB
  • Adobe Photoshop Express – 免費線上圖片編輯服務,提供圖片裁切、調整大小、修飾與套用濾鏡效果
  • Wunderstock – 超過 1 千萬 CC0 免費圖片,提供壓縮後圖片與免費線上圖片編輯工具
  • Diff Checker Text – 免費線上檢查文字或檔案不同之處,可支援文字、圖片、PDF 檔案、Excel 檔案多種格式
  • Logaster – 免費 Logo 線上產生器,一秒建立網站 Logo 與 Favicon 打造獨特品牌 Logo 圖示
  • Lens – Mac 免費開源圖片格式轉換工具,可批次處理大量圖片支援 JPG、PNG 與 GIF 格式
  • 【WordPress 付費主題免費下載】Vihan | Personal & Travel WordPress Blog Theme
Bluehost best deal from TechMoon $2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • Muetab - 開啟新分頁隨機顯示風景圖、引言與時間、問候語的 Chrome 擴充功能
  • Simple Ops - 免費網站運行監測線上工具,即時紀錄網站性能與提供警報,隨時提醒網站運行狀態
  • Facebook 分享偵錯工具 - Facebook Debug 官方工具,幫你更新已分享貼文的內容資訊
  • (2021 年 1 月)Udemy 免費課程優惠碼 - 付費課程限時折扣 0 元免費線上學習
  • FlexClip - 完全免費的線上影片編輯製作工具,套入範本三分鐘產出一支精美影片
  • 1.1.1.1 最快速最安全的 DNS 服務,CloudFlare 加速你的上網速度與網路安全性
  • mkcert - 讓你在 Localhost 與 IP 環境中也能安裝 SSL 證書,啟用 HTTPS 協議
  • Algolia - 替代 Google Custom Search Engine 與網站內建搜尋功能的新選擇
  • 全新 Microsoft Office APP - 整合 Word、Excel、PowerPoint 於一身免費使用
  • 「韓流終結者」台灣駭客利用 AI 技術,開發 Chrome 擴充外掛自動遮住韓國瑜的臉!

相關文章

  • Testmysite.io – 免費線上檢測網站速度,幫助你改善網站加載速度,提升網站排名
  • 【WordPress 付費外掛免費下載】Responsive Posts Carousel WordPress Plugin
  • Data Breach Checker – 線上免費檢測 Email 電子信箱,查看 Email 地址是否有遭到洩漏與被盜風險
  • Removal Editing Tool – 強大的免費線上圖片編輯器,將圖片去背後自動匯入即可立即設計自訂橫幅廣告
  • Icons8 – 大量圖標免費下載、嵌入 HTML,更提供免費圖片、向量插圖、音樂下載使用
  • Hippopx 線上免費圖庫 – CC0 可商用無需署名,多尺寸高畫質解析度免費下載
  • PDF.new – Adobe 攜手 Google 提供「.new」相關 PDF 免費線上轉檔服務
  • Picjumbo – 極具質感的線上免費圖庫,由設計師所建立提供大量可商用素材資源網站
  • 【WordPress 付費主題免費下載】Canteen – Restaurant WordPress Theme
  • Algori 360 Image WordPress 外掛 – 教你如何在 WordPress 中顯示 360 度的 VR 環景展示圖片
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明