Title: JTZL's Dark Mode Author: jtzl Published: 24. Februara 2026. Last modified: 25. Februara 2026. --- Pretražite dodatke ![](https://ps.w.org/jtzls-dark-mode/assets/banner-772x250.png?rev=3479041) ![](https://ps.w.org/jtzls-dark-mode/assets/icon-256x256.png?rev=3479041) # JTZL's Dark Mode Od [jtzl](https://profiles.wordpress.org/jtzl/) [Skini](https://downloads.wordpress.org/plugin/jtzls-dark-mode.1.0.0.zip) * [Detalji](https://bs.wordpress.org/plugins/jtzls-dark-mode/#description) * [Recenzije](https://bs.wordpress.org/plugins/jtzls-dark-mode/#reviews) * [Instalacija](https://bs.wordpress.org/plugins/jtzls-dark-mode/#installation) * [Razvoj](https://bs.wordpress.org/plugins/jtzls-dark-mode/#developers) [Podrška](https://wordpress.org/support/plugin/jtzls-dark-mode/) ## Opis 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 ## Instalacija 1. Upload the `jtzls-dark-mode` folder to the `/wp-content/plugins/` directory 2. Activate the plugin through the ‘Plugins’ menu in WordPress 3. That's it! Dark mode will automatically apply based on visitor preferences ## ČPP ### Does this plugin require any configuration? No. JTZL's Dark Mode works automatically without any settings or configuration. ### How does dark mode detection work? The plugin uses the CSS `prefers-color-scheme: dark` media query, which detects your operating system's color scheme preference. This is a privacy-respecting, client- side-only approach. ### Will this affect my images and videos? No. The plugin includes media preservation rules that ensure images, videos, iframes, and embedded content display without color distortion. ### Can I disable dark mode on specific pages? Yes. Use the `jtzl_dark_mode_enabled` filter hook: ``` add_filter( 'jtzl_dark_mode_enabled', function( $enabled ) { if ( is_page( 'landing-page' ) ) { return false; } return $enabled; } ); ``` ### Can I customize the dark mode colors? Yes. Use the `jtzl_dark_mode_css_variables` filter hook to override default CSS variables: ``` add_filter( 'jtzl_dark_mode_css_variables', function( $variables ) { $variables['--id-bg-primary'] = '#0d1117'; $variables['--id-text-primary'] = '#f0f0f0'; return $variables; } ); ``` Available CSS variables: * `--id-bg-primary` – Primary background color * `--id- bg-secondary` – Secondary background color * `--id-text-primary` – Primary text color * `--id-text-secondary` – Secondary text color * `--id-border-color` – Border color * `--id-link-color` – Link color * `--id-link-hover` – Link hover color Note: CSS variables only apply to Block themes. Classic themes use filter inversion. ### Does this work with Full Site Editing (FSE) themes? Yes. JTZL's Dark Mode uses different styling strategies optimized for each theme type: * Block themes (FSE): Uses CSS custom properties for precise color control * Classic themes: Uses CSS filter inversion for broad compatibility Both approaches ensure proper dark mode rendering without theme modifications. ### Does this affect the WordPress admin area? No. Dark mode styling is applied only to the public-facing frontend of your site. ### Can I add custom CSS rules? Yes. Use the `jtzl_dark_mode_custom_css` filter hook: ``` add_filter( 'jtzl_dark_mode_custom_css', function( $css ) { return $css . '@media (prefers-color-scheme: dark) { .my-element { color: #fff; } }'; } ); ``` ### What are the system requirements? * PHP 8.2 or higher * WordPress 6.9 or higher * Composer (for development only) ### Is there an interactive preview? Yes. Launch a live preview in WordPress Playground: https://playground.wordpress.net/?blueprint-url=https://wordpress.org/plugins/wp- json/plugins/v1/plugin/jtzls-dark-mode/blueprint.json ## Recenzije Nema recenzija za ovaj dodatak. ## Saradnici i programeri “JTZL's Dark Mode” is open source software. The following people have contributed to this plugin. Doprinositelji * [ jtzl ](https://profiles.wordpress.org/jtzl/) * [ yoren ](https://profiles.wordpress.org/yoren/) [Prevedi “JTZL's Dark Mode” na vaš jezik.](https://translate.wordpress.org/projects/wp-plugins/jtzls-dark-mode) ### Zainteresirani za razvoj? [Pregledajte kôd](https://plugins.trac.wordpress.org/browser/jtzls-dark-mode/), pogledajte [SVN spremište](https://plugins.svn.wordpress.org/jtzls-dark-mode/)ili se pretplatite na [dnevnik razvoja](https://plugins.trac.wordpress.org/log/jtzls-dark-mode/) od [RSS](https://plugins.trac.wordpress.org/log/jtzls-dark-mode/?limit=100&mode=stop_on_copy&format=rss). ## Zapis promijena #### 1.0.0 * Initial release * Automatic dark mode detection via CSS prefers-color-scheme * Theme-agnostic styling with CSS custom properties * Media preservation for images, videos, and embeds * Developer filter hooks for customization ## Meta * Version **1.0.0** * Last updated **prije 3 mjeseca** * Active installations **Manje od 10** * WordPress version ** 6.9 ili viša ** * Tested up to **6.9.4** * PHP version ** 8.2 ili viša ** * Language * [English (US)](https://wordpress.org/plugins/jtzls-dark-mode/) * Tags * [accessibility](https://bs.wordpress.org/plugins/tags/accessibility/)[dark mode](https://bs.wordpress.org/plugins/tags/dark-mode/) [dark theme](https://bs.wordpress.org/plugins/tags/dark-theme/)[prefers-color-scheme](https://bs.wordpress.org/plugins/tags/prefers-color-scheme/) * [Napredni pogled](https://bs.wordpress.org/plugins/jtzls-dark-mode/advanced/) ## Ocjene No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/jtzls-dark-mode/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/jtzls-dark-mode/reviews/) ## Doprinositelji * [ jtzl ](https://profiles.wordpress.org/jtzl/) * [ yoren ](https://profiles.wordpress.org/yoren/) ## Podrška Imate nešto za reći? Trebate pomoć? [Pogledaj forum podrške](https://wordpress.org/support/plugin/jtzls-dark-mode/)