內容簡介
總結：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
