{"id":282441,"date":"2026-02-24T09:48:49","date_gmt":"2026-02-24T09:48:49","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/inherited-dark\/"},"modified":"2026-02-25T13:27:13","modified_gmt":"2026-02-25T13:27:13","slug":"jtzls-dark-mode","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/jtzls-dark-mode\/","author":23341450,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.0","stable_tag":"1.0.0","tested":"6.9.4","requires":"6.9","requires_php":"8.2","requires_plugins":null,"header_name":"JTZL's Dark Mode","header_author":"JT G.","header_description":"Automatic dark mode styling based on visitor OS preference using CSS prefers-color-scheme","assets_banners_color":"0757a8","last_updated":"2026-02-25 13:27:13","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/jtzls-dark-mode\/","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":190,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"jtzl","date":"2026-02-25 13:27:13"}},"upgrade_notice":{"1.0.0":"<p>Initial release of JTZL&#039;s Dark Mode.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3479041,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3479041,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3479041,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3479041,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3479041,"resolution":false,"location":"assets","locale":"","contents":"{\"landingPage\":\"\\\/\",\"preferredVersions\":{\"php\":\"8.2\",\"wp\":\"latest\"},\"steps\":[{\"step\":\"login\"},{\"step\":\"runPHP\",\"code\":\"<?php\\nrequire_once '\\\/wordpress\\\/wp-load.php';\\nrequire_once ABSPATH . 'wp-admin\\\/includes\\\/plugin.php';\\nif ( file_exists( WP_PLUGIN_DIR . '\\\/jtzls-dark-mode\\\/jtzls-dark-mode.php' ) ) {\\n    activate_plugin( 'jtzls-dark-mode\\\/jtzls-dark-mode.php' );\\n}\\n\\n$existing = get_page_by_path( 'dark-mode-demo', OBJECT, 'page' );\\n$content = '<h2>JTZL\\\\'s Dark Mode Demo<\\\/h2><p>Switch your operating system to dark mode and refresh this page.<\\\/p><p>This page includes links, media, and standard WordPress blocks to show contrast behavior.<\\\/p><figure class=\\\"wp-block-image\\\"><img src=\\\"https:\\\/\\\/picsum.photos\\\/id\\\/237\\\/1200\\\/700\\\" alt=\\\"Demo media should keep original colors\\\" \\\/><\\\/figure><p><a href=\\\"#\\\">Example link style<\\\/a><\\\/p>';\\n\\n$page_data = array(\\n    'post_type' => 'page',\\n    'post_title' => 'Dark Mode Demo',\\n    'post_name' => 'dark-mode-demo',\\n    'post_status' => 'publish',\\n    'post_content' => $content\\n);\\n\\nif ( $existing ) {\\n    $page_data['ID'] = $existing->ID;\\n    $page_id = wp_update_post( $page_data, true );\\n} else {\\n    $page_id = wp_insert_post( $page_data, true );\\n}\\n\\nif ( ! is_wp_error( $page_id ) ) {\\n    update_option( 'show_on_front', 'page' );\\n    update_option( 'page_on_front', (int) $page_id );\\n}\\n\\nupdate_option( 'blogname', \\\"JTZL's Dark Mode Demo\\\" );\\n\"},{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"jtzls-dark-mode\"},\"options\":{\"activate\":true}}]}"}},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Dark mode automatically applied based on OS preference"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1953,173231,24155,254018],"plugin_category":[34],"plugin_contributors":[246791,87048],"plugin_business_model":[],"class_list":["post-282441","plugin","type-plugin","status-publish","hentry","plugin_tags-accessibility","plugin_tags-dark-mode","plugin_tags-dark-theme","plugin_tags-prefers-color-scheme","plugin_category-accessibility","plugin_contributors-jtzl","plugin_contributors-yoren","plugin_committers-jtzl"],"banners":{"banner":"https:\/\/ps.w.org\/jtzls-dark-mode\/assets\/banner-772x250.png?rev=3479041","banner_2x":"https:\/\/ps.w.org\/jtzls-dark-mode\/assets\/banner-1544x500.png?rev=3479041","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/jtzls-dark-mode\/assets\/icon-128x128.png?rev=3479041","icon_2x":"https:\/\/ps.w.org\/jtzls-dark-mode\/assets\/icon-256x256.png?rev=3479041","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<p>Interactive demo:\nhttps:\/\/playground.wordpress.net\/?blueprint-url=https:\/\/wordpress.org\/plugins\/wp-json\/plugins\/v1\/plugin\/jtzls-dark-mode\/blueprint.json<\/p>\n\n<p><strong>Key Features:<\/strong><\/p>\n\n<ul>\n<li>Automatic detection using CSS <code>prefers-color-scheme: dark<\/code> media query<\/li>\n<li>Zero configuration - works out of the box<\/li>\n<li>Privacy-respecting - all detection happens client-side<\/li>\n<li>Theme-agnostic - works with any WordPress theme<\/li>\n<li>Media preservation - images, videos, and embeds display correctly<\/li>\n<li>Developer-friendly - extensible via WordPress filter hooks<\/li>\n<\/ul>\n\n<p><strong>How It Works:<\/strong><\/p>\n\n<p>The plugin uses the CSS <code>prefers-color-scheme<\/code> 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.<\/p>\n\n<p><strong>Technical Features:<\/strong><\/p>\n\n<ul>\n<li>Modern PHP 8.2+ architecture with dependency injection (PHP-DI)<\/li>\n<li>Service-oriented design with PSR-4 autoloading<\/li>\n<li>Separate styling strategies for Block themes (CSS variables) and Classic themes (filter inversion)<\/li>\n<li>Comprehensive test coverage with PHPUnit<\/li>\n<\/ul>\n\n<p><strong>Developer Hooks:<\/strong><\/p>\n\n<p>Customize the plugin behavior using these filter hooks:<\/p>\n\n<ul>\n<li><code>jtzl_dark_mode_enabled<\/code> - Enable\/disable dark mode on specific pages<\/li>\n<li><code>jtzl_dark_mode_css_variables<\/code> - Customize dark mode colors<\/li>\n<li><code>jtzl_dark_mode_custom_css<\/code> - Add custom CSS rules<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>jtzls-dark-mode<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress<\/li>\n<li>That's it! Dark mode will automatically apply based on visitor preferences<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20require%20any%20configuration%3F\"><h3>Does this plugin require any configuration?<\/h3><\/dt>\n<dd><p>No. JTZL's Dark Mode works automatically without any settings or configuration.<\/p><\/dd>\n<dt id=\"how%20does%20dark%20mode%20detection%20work%3F\"><h3>How does dark mode detection work?<\/h3><\/dt>\n<dd><p>The plugin uses the CSS <code>prefers-color-scheme: dark<\/code> media query, which detects your operating system's color scheme preference. This is a privacy-respecting, client-side-only approach.<\/p><\/dd>\n<dt id=\"will%20this%20affect%20my%20images%20and%20videos%3F\"><h3>Will this affect my images and videos?<\/h3><\/dt>\n<dd><p>No. The plugin includes media preservation rules that ensure images, videos, iframes, and embedded content display without color distortion.<\/p><\/dd>\n<dt id=\"can%20i%20disable%20dark%20mode%20on%20specific%20pages%3F\"><h3>Can I disable dark mode on specific pages?<\/h3><\/dt>\n<dd><p>Yes. Use the <code>jtzl_dark_mode_enabled<\/code> filter hook:<\/p>\n\n<pre><code>add_filter( 'jtzl_dark_mode_enabled', function( $enabled ) {\n    if ( is_page( 'landing-page' ) ) {\n        return false;\n    }\n    return $enabled;\n} );\n<\/code><\/pre><\/dd>\n<dt id=\"can%20i%20customize%20the%20dark%20mode%20colors%3F\"><h3>Can I customize the dark mode colors?<\/h3><\/dt>\n<dd><p>Yes. Use the <code>jtzl_dark_mode_css_variables<\/code> filter hook to override default CSS variables:<\/p>\n\n<pre><code>add_filter( 'jtzl_dark_mode_css_variables', function( $variables ) {\n    $variables['--id-bg-primary'] = '#0d1117';\n    $variables['--id-text-primary'] = '#f0f0f0';\n    return $variables;\n} );\n<\/code><\/pre>\n\n<p>Available CSS variables:\n* <code>--id-bg-primary<\/code> - Primary background color\n* <code>--id-bg-secondary<\/code> - Secondary background color\n* <code>--id-text-primary<\/code> - Primary text color\n* <code>--id-text-secondary<\/code> - Secondary text color\n* <code>--id-border-color<\/code> - Border color\n* <code>--id-link-color<\/code> - Link color\n* <code>--id-link-hover<\/code> - Link hover color<\/p>\n\n<p>Note: CSS variables only apply to Block themes. Classic themes use filter inversion.<\/p><\/dd>\n<dt id=\"does%20this%20work%20with%20full%20site%20editing%20%28fse%29%20themes%3F\"><h3>Does this work with Full Site Editing (FSE) themes?<\/h3><\/dt>\n<dd><p>Yes. JTZL's Dark Mode uses different styling strategies optimized for each theme type:<\/p>\n\n<ul>\n<li>Block themes (FSE): Uses CSS custom properties for precise color control<\/li>\n<li>Classic themes: Uses CSS filter inversion for broad compatibility<\/li>\n<\/ul>\n\n<p>Both approaches ensure proper dark mode rendering without theme modifications.<\/p><\/dd>\n<dt id=\"does%20this%20affect%20the%20wordpress%20admin%20area%3F\"><h3>Does this affect the WordPress admin area?<\/h3><\/dt>\n<dd><p>No. Dark mode styling is applied only to the public-facing frontend of your site.<\/p><\/dd>\n<dt id=\"can%20i%20add%20custom%20css%20rules%3F\"><h3>Can I add custom CSS rules?<\/h3><\/dt>\n<dd><p>Yes. Use the <code>jtzl_dark_mode_custom_css<\/code> filter hook:<\/p>\n\n<pre><code>add_filter( 'jtzl_dark_mode_custom_css', function( $css ) {\n    return $css . '@media (prefers-color-scheme: dark) { .my-element { color: #fff; } }';\n} );\n<\/code><\/pre><\/dd>\n<dt id=\"what%20are%20the%20system%20requirements%3F\"><h3>What are the system requirements?<\/h3><\/dt>\n<dd><ul>\n<li>PHP 8.2 or higher<\/li>\n<li>WordPress 6.9 or higher<\/li>\n<li>Composer (for development only)<\/li>\n<\/ul><\/dd>\n<dt id=\"is%20there%20an%20interactive%20preview%3F\"><h3>Is there an interactive preview?<\/h3><\/dt>\n<dd><p>Yes. Launch a live preview in WordPress Playground:<\/p>\n\n<p>https:\/\/playground.wordpress.net\/?blueprint-url=https:\/\/wordpress.org\/plugins\/wp-json\/plugins\/v1\/plugin\/jtzls-dark-mode\/blueprint.json<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<li>Automatic dark mode detection via CSS prefers-color-scheme<\/li>\n<li>Theme-agnostic styling with CSS custom properties<\/li>\n<li>Media preservation for images, videos, and embeds<\/li>\n<li>Developer filter hooks for customization<\/li>\n<\/ul>","raw_excerpt":"Automatic dark mode styling based on visitor OS preference using CSS prefers-color-scheme media query.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/282441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=282441"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jtzl"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=282441"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=282441"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=282441"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=282441"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=282441"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=282441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}