[WordPress] 外掛分享： JTZL’s Dark Mode

WordPress 外掛 JTZL's Dark Mode 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「JTZL's Dark Mode」是 2026-02-23 上架。
  • 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
  • 上一次更新是 2026-02-25，不久前才剛更新。
  • 外掛最低要求 WordPress 6.9 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 8.2 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

jtzl | yoren |

外掛標籤

dark mode | dark theme | accessibility | prefers-color-scheme |

內容簡介

總結：JTZL 的 Dark Mode 外掛會根據訪客的作業系統偏好自動將 WordPress 網站套用暗色主題，無需配置，完全自動化。

1. 如何讓 Dark Mode 外掛自動套用暗色主題？
使用 CSS prefers-color-scheme 的媒體查詢來偵測訪客的作業系統設置是否為暗色模式，當偵測到時，會自動套用暗色主題風格，無需任何 JavaScript 或伺服器處理。

2. 這個外掛的主要特點有哪些？
- 使用 CSS prefers-color-scheme: dark 媒體查詢進行自動偵測
- 無需配置，開箱即用
- 尊重隱私，所有偵測都在客戶端進行
- 與任何 WordPress 佈景主題兼容
- 保留媒體內容，圖片、影片和嵌入物都會正確顯示
- 有利開發者，可通過 WordPress 過濾器鉤子進行擴展

3. 有哪些技術特點？
- 使用現代 PHP 8.2+ 架構，具有依賴注入（PHP-DI）
- 服務導向設計，並使用 PSR-4 自動加載
- 针对區塊主題（CSS 變數）和傳統主題（過濾反轉）採用不同的風格策略
- 通過 PHPUnit 進行全面的測試覆蓋

4. 如何通過開發者鉤子來自定義外掛行為？
- jtzl_dark_mode_enabled – 在特定頁面啟用/停用暗色主題
- jtzl_dark_mode_css_variables – 自定義暗色主題顏色
- jtzl_dark_mode_custom_css – 添加自定義 CSS 規則

原文外掛簡介

JTZL’s Dark Mode automatically applies dark mode styling to your WordPress site based on your visitors’ operating system preferences. No configuration required – it just works.
Interactive demo:
https://playground.wordpress.net/?blueprint-url=https://wordpress.org/plugins/wp-json/plugins/v1/plugin/jtzls-dark-mode/blueprint.json
Key Features:

Automatic detection using CSS prefers-color-scheme: dark media query
Zero configuration – works out of the box
Privacy-respecting – all detection happens client-side
Theme-agnostic – works with any WordPress theme
Media preservation – images, videos, and embeds display correctly
Developer-friendly – extensible via WordPress filter hooks

How It Works:
The plugin uses the CSS prefers-color-scheme media query to detect when a visitor’s operating system is set to dark mode. When detected, dark mode styles are automatically applied without any JavaScript or server-side processing.
Technical Features:

Modern PHP 8.2+ architecture with dependency injection (PHP-DI)
Service-oriented design with PSR-4 autoloading
Separate styling strategies for Block themes (CSS variables) and Classic themes (filter inversion)
Comprehensive test coverage with PHPUnit

Developer Hooks:
Customize the plugin behavior using these filter hooks:

jtzl_dark_mode_enabled – Enable/disable dark mode on specific pages
jtzl_dark_mode_css_variables – Customize dark mode colors
jtzl_dark_mode_custom_css – Add custom CSS rules

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「JTZL's Dark Mode」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | trunk |

延伸相關外掛（你可能也想知道）

  • Ally – Web Accessibility & Usability 》One Click Accessibility 工具列是最快速的 WordPress 外掛，可幫助您使網站更具無障礙性。, 儘管大部分的無障礙性問題需要直接更改內容才能解決，One Click ...。
  • Auto Image Attributes From Filename With Bulk Updater (Add Alt Text, Image Title For Image SEO) 》這個外掛可以自動從圖片檔案名稱中添加圖片標題、圖片標語、描述及替代文字等圖片屬性。, 不論是新圖片還是在媒體庫裡的現有圖片，這個外掛都可以更新圖片屬...。
  • Accessibility by UserWay 》如果你不知道從何開始，網站的無障礙性可能會顯得非常複雜和令人不知所措。, 讓我們讓它變得更簡單且更易於使用，使用 UserWay 的 Accessibility Widget 可為...。
  • WP Accessibility 》這個外掛可以幫助解決 WordPress 主題中各種常見的無障礙問題。儘管大多數無障礙問題無法在不直接更改主題的情況下解決，但 WP Accessibility 添加了許多有用...。
  • WP Dark Mode – Improve Accessibility with AI Powered Dark Theme 》使用 WP Dark Mode 外掛程式，為您的 WordPress 網站創造一個令人驚豔的暗黑模式版本。WP Dark Mode 可以自動運行，無需進入任何複雜的設置。, 只需啟用該外...。
  • My Calendar – Accessible Event Manager 》My Calendar 是一款 WordPress 活動管理外掛，提供豐富的自定義事件顯示方式。本外掛支援在 WordPress Multisite 中建立個別的事件日曆，按類別、地點或作者...。
  • Alt Text AI – Automatically generate image alt text for SEO and accessibility 》AltText.ai 是一個 WordPress 外掛，利用最新的 AI 計算機視覺和深度學習技術為您的圖像自動生成替代文字。, 使用我們的深度學習 AI，改善您的 SEO，並提高網...。
  • AccessibleWP – Accessibility Toolbar 》在您的 WordPress 網站上添加專業級無障礙工具欄，讓殘障使用者能更輕鬆地使用您的網站。, 工具欄選項, , 鍵盤導航 - 允許鍵盤導航, 停用動畫 - 允許停用 CSS...。
  • WP Accessibility Helper (WAH) 》WordPress可讀性易於設置！, 網頁可讀性是指消除阻礙殘障人士互動與訪問網站的實踐。當網站正確設計、開發和編輯時，所有用戶都可以平等地訪問信息和功能。, ...。
  • SimpleTOC – Table of Contents Block 》在您的文章和頁面中加入目錄區塊。該 TOC 是包含文章或頁面中所有標題的嵌套連結列表。只需添加一個區塊並搜索“SimpleTOC”或“TOC”即可使用它。, toc 的最大深...。
  • Equalize Digital Accessibility Checker – Audit Your Website for WCAG, ADA, and Section 508 Accessibility Errors 》Accessibility Checker 外掛, , 外掛網站 | 文件 | 免費版與專業版比較 | 購買專業版 | 優先支援＆無障礙諮詢 | WordPress 無障礙聚會 | WordPress 無障礙 Fa...。
  • Web Accessibility by accessiBe 》無障礙、自動化且負擔得起：讓你的網站無障礙化, accessiBe 是網頁無障礙解決方案和服務的市場領導者。, 我們基於人工智能的解決方案 - accessWidget，保持 A...。
  • Plugin Check (PCP) 》總結:, 「Plugin Check」是一種方便測試外掛程式是否符合Plugin Review團隊的基本需求標準的方式。透過這個外掛程式，您能夠執行團隊所使用的大部分檢查，並...。
  • SOGO Accessibility 》已使用 Gutenberg 進行測試, 版本 2.0.0 修正了一些未完全符合 WCAG 2.0 AA 等級要求的問題, 插件僅使用 JavaScript 和 CSS，為前端網站啟用了一些無障礙功能...。
  • WCAG 2.0 form fields for Gravity Forms 》, 此外掛是 Gravity Forms 的附加元件。如果您還沒有擁有 Gravity Forms 授權，請 現在購買！（聯盟網路連結）, , 此外掛的功能是什麼？, , 將單選、勾選框和...。

文章
Filter
Apply Filters
Close
Mastodon