Title: JTZL's Dark Mode Author: jtzl Published: 24. 2. 2026 Last modified: 25. 2. 2026 --- Prohledat pluginy ![](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 Autor: [jtzl](https://profiles.wordpress.org/jtzl/) [Stáhnout](https://downloads.wordpress.org/plugin/jtzls-dark-mode.1.0.0.zip) * [Podrobnosti](https://cs.wordpress.org/plugins/jtzls-dark-mode/#description) * [Hodnocení](https://cs.wordpress.org/plugins/jtzls-dark-mode/#reviews) * [Instalace](https://cs.wordpress.org/plugins/jtzls-dark-mode/#installation) * [Vývojáři](https://cs.wordpress.org/plugins/jtzls-dark-mode/#developers) [Podpora](https://wordpress.org/support/plugin/jtzls-dark-mode/) ## Popis 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 ## Instalace 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 ## Nejčastější dotazy ### 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 ## Recenze Pro tento plugin nejsou žádné recenze. ## Autoři JTZL's Dark Mode je otevřený software. Následující lidé přispěli k vývoji tohoto pluginu. Spolupracovníci * [ jtzl ](https://profiles.wordpress.org/jtzl/) * [ yoren ](https://profiles.wordpress.org/yoren/) [Přeložte “JTZL's Dark Mode” do svého jazyka.](https://translate.wordpress.org/projects/wp-plugins/jtzls-dark-mode) ### Zajímá vás vývoj? [Prohledejte kód](https://plugins.trac.wordpress.org/browser/jtzls-dark-mode/), podívejte se do [SVN repozitáře](https://plugins.svn.wordpress.org/jtzls-dark-mode/), nebo se přihlaste k[ odběru protokolu vývoje](https://plugins.trac.wordpress.org/log/jtzls-dark-mode/) pomocí [RSS](https://plugins.trac.wordpress.org/log/jtzls-dark-mode/?limit=100&mode=stop_on_copy&format=rss). ## Přehled změn #### 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 * Verze **1.0.0** * Poslední aktualizace **před 4 měsíce** * Aktivních instalací **Méně než 10** * Verze WordPressu ** 6.9 nebo novější ** * Testováno až do WordPressu **6.9.4** * Verze PHP ** 8.2 nebo novější ** * Jazyk * [English (US)](https://wordpress.org/plugins/jtzls-dark-mode/) * Štítky * [accessibility](https://cs.wordpress.org/plugins/tags/accessibility/)[dark mode](https://cs.wordpress.org/plugins/tags/dark-mode/) [dark theme](https://cs.wordpress.org/plugins/tags/dark-theme/)[prefers-color-scheme](https://cs.wordpress.org/plugins/tags/prefers-color-scheme/) * [Podrobnosti](https://cs.wordpress.org/plugins/jtzls-dark-mode/advanced/) ## Hodnocení Zatím nebyly zadány žádné recenze. [Your review](https://wordpress.org/support/plugin/jtzls-dark-mode/reviews/#new-post) [Zobrazit všechny recenze](https://wordpress.org/support/plugin/jtzls-dark-mode/reviews/) ## Spolupracovníci * [ jtzl ](https://profiles.wordpress.org/jtzl/) * [ yoren ](https://profiles.wordpress.org/yoren/) ## Podpora Potřebujete pomoc? [Fórum podpory](https://wordpress.org/support/plugin/jtzls-dark-mode/)