Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

JTZL's Dark Mode

开发者 jtzl
yoren
更新时间 2026年3月10日 20:11
PHP版本: 8.2 及以上
WordPress版本: 6.9
版权: GPL-2.0-or-later
版权网址: 版权信息

标签

accessibility dark mode dark theme prefers-color-scheme

下载

1.0.0

详情介绍:

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: 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: Developer Hooks: Customize the plugin behavior using these filter hooks:

安装:

  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

升级注意事项:

1.0.0 Initial release of JTZL's Dark Mode.

常见问题:

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

更新日志:

1.0.0