← All changes | Inc/Classes/DarkModeConflicts.php +7 -231 4.2.10 → 4.0.5.4 View file →

		@@ -1,10 +1,10 @@
1	1	<?php
2	2
3		-namespace PXLBSAdminify\Inc\Classes;
	3	+namespace WPAdminify\Inc\Classes;
4	4
5		-use PXLBSAdminify\Inc\Utils;
6		-use PXLBSAdminify\Inc\Admin\AdminSettings;
	5	+use WPAdminify\Inc\Utils;
	6	+use WPAdminify\Inc\Admin\AdminSettings;
7	7
8	8	// no direct access allowed
9	9	if (!defined('ABSPATH')) {
10	10	exit;
		@@ -9,9 +9,9 @@
9	9	if (!defined('ABSPATH')) {
10	10	exit;
11	11	}
12	12	/**
13		- * PXLBSAdminify
	13	+ * WPAdminify
14	14	* Dark Mode Conflicts with other plugins supports
15	15	*
16	16	* @author Jewel Theme <[email protected]>
17	17	*/
		@@ -21,35 +21,12 @@
21	21	public $options;
22	22
23	23	public function __construct()
24	24	{
25		- add_action('admin_enqueue_scripts', array($this, 'darkmode_scripts'), 100);
26		- add_action( 'enqueue_block_editor_assets', array($this, "gutenberg_block_editor_darkmode_assets"));
27		- // WP 6.3+/7.0: the block editor canvas runs in an iframe. The AdminifyDarkMode
28		- // script has no built-in iframe support, so inject the same script INTO the
29		- // iframe and call .enable() from inside — that way Darkreader runs over the
30		- // iframe DOM the same dynamic way it runs on the parent admin.
31		- // Use admin_footer (not enqueue_block_editor_assets — wp_add_inline_script
32		- // silently dropped the bridge) and direct-print via wp_print_inline_script_tag.
33		- add_action('admin_footer', array($this, 'inject_darkmode_into_editor_iframe'), 999);
34		- // Classic editor (TinyMCE) renders the Visual tab inside its own iframe
35		- // (#content_ifr). Same iframe-isolation problem as the block canvas: the
36		- // parent Darkreader run can't reach the iframe DOM, so the editor body
37		- // stays white in dark mode. Inject the same script into TinyMCE iframes.
38		- add_action('admin_footer', array($this, 'inject_darkmode_into_classic_editor_iframe'), 999);
39		- // customize.php controls: Adminify scripts are skipped there by design
40		- // (Assets::should_skip_adminify_scripts), so enqueue dark-mode only on this
41		- // dedicated hook to keep the customize panel dark without the rest of Adminify.
42		- add_action('customize_controls_enqueue_scripts', array($this, 'customize_controls_darkmode_enqueue'));
43		- // customize.php PREVIEW: the right-side theme preview renders inside its own
44		- // iframe (a full frontend render). The controls-panel enqueue above never
45		- // reaches it, so the previewed site stays light in dark mode. customize_preview_init
46		- // fires inside the preview frame context — enqueue dark-mode there to darken the
47		- // previewed theme the same dynamic Darkreader way, matching the classic editor.
48		- add_action('customize_preview_init', array($this, 'customize_preview_darkmode_enqueue'));
	25	+ add_action('admin_enqueue_scripts', array($this, 'jltwp_adminify_darkmode_scripts'), 100);
49	26	}
50	27
51		- public function darkmode_scripts()
	28	+ public function jltwp_adminify_darkmode_scripts()
52	29	{
53	30
54	31	$this->options = (array) AdminSettings::get_instance()->get();
55	32	$this->options = !empty($this->options['light_dark_mode']['admin_ui_mode']) ? $this->options['light_dark_mode']['admin_ui_mode'] : '';
		@@ -414,208 +391,7 @@
414	391
415	392	$dark_mode_style = preg_replace('#/\*.*?\*/#s', '', $dark_mode_style);
416	393	$dark_mode_style = preg_replace('/\s*([{}|:;,])\s+/', '$1', $dark_mode_style);
417	394	$dark_mode_style = preg_replace('/\s\s+(.*)/', '$1', $dark_mode_style);
418		- wp_add_inline_style('adminify-admin', wp_strip_all_tags($dark_mode_style));
419		- }
420		-
421		- /**
422		- * Gutenberg Block Editor Dark Mode CSS
423		- */
424		- function gutenberg_block_editor_darkmode_assets () {
425		-
426		- wp_register_style('adminify-gutenberg-dark', false, array(), PXLBSADMINIFY_VER);
427		- wp_enqueue_style('adminify-gutenberg-dark');
428		-
429		- // $parent_selector = 'body.wp-adminify.adminify-dark-mode';
430		- $parent_selector = 'body.wp-adminify';
431		-
432		- $dark_mode_style = "$parent_selector .components-modal__content .components-text,
433		- $parent_selector .components-popover__content .components-text { color: black!important; }
434		- $parent_selector .block-editor-block-inspector .components-tools-panel { border-top-color: #e0e0e0; }
435		- $parent_selector .admin-ui-navigable-region .components-panel__header > div > button { color: black; }
436		- $parent_selector .editor-sidebar__panel .editor-post-card-panel__header svg,
437		- $parent_selector .commands-command-menu__container .commands-command-menu__header svg { fill: black; }
438		- ";
439		- wp_add_inline_style('adminify-gutenberg-dark', wp_strip_all_tags($dark_mode_style));
440		- }
441		-
442		- /**
443		- * Resolve the active light/dark mode for the current user.
444		- * Per-user `color_mode` meta takes precedence over the global setting.
445		- * Returns 'light' | 'dark' | 'auto' | ''.
446		- */
447		- public function pxlbsadminify_resolve_color_mode()
448		- {
449		- $opts = (array) AdminSettings::get_instance()->get();
450		- $global_mode = !empty($opts['light_dark_mode']['admin_ui_mode']) ? $opts['light_dark_mode']['admin_ui_mode'] : 'light';
451		- $user_mode = get_user_meta(get_current_user_id(), 'color_mode', true);
452		- return !empty($user_mode) ? $user_mode : $global_mode;
453		- }
454		-
455		- /**
456		- * Inject the AdminifyDarkMode script INTO the WP 6.3+/7.0 block editor iframe
457		- * canvas. The script attaches a global `window.AdminifyDarkMode` and uses a
458		- * Darkreader-style dynamic theme that rewrites colors based on the running
459		- * document — so it must be loaded inside the iframe's window to darken the
460		- * canvas DOM, not just the parent admin chrome.
461		- *
462		- * The bridge below watches for `iframe[name="editor-canvas"]` (added/changed
463		- * across edits or full-site editor route changes), injects the dark-mode JS
464		- * into the iframe's document, and calls `AdminifyDarkMode.enable()` once it
465		- * loads. `__adminifyDarkInjected` guards against double-injection.
466		- */
467		- public function inject_darkmode_into_editor_iframe()
468		- {
469		- $mode = $this->pxlbsadminify_resolve_color_mode();
470		- if ( $mode === 'auto' ) {
471		- $mode = 'system';
472		- }
473		- // 'dark' = always on; 'system' = follow OS prefers-color-scheme (decided client-side).
474		- if ( $mode !== 'dark' && $mode !== 'system' ) {
475		- return;
476		- }
477		- // Only run on block-editor pages (post.php / post-new.php / site editor).
478		- $screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
479		- if ( ! $screen || ! method_exists( $screen, 'is_block_editor' ) || ! $screen->is_block_editor() ) {
480		- // also accept Site Editor screen ids
481		- $is_site_editor = $screen && in_array( $screen->id, array( 'site-editor', 'gutenberg_page_gutenberg-edit-site' ), true );
482		- if ( ! $is_site_editor ) {
483		- return;
484		- }
485		- }
486		- $dark_js_url = PXLBSADMINIFY_ASSETS . 'admin/js/wp-adminify-dark-mode' . Utils::assets_ext( '.js' );
487		- // For 'system' mode, only proceed when the OS currently prefers dark; otherwise bail
488		- // out of the bridge entirely so the iframe stays light (matches the parent admin).
489		- $apply_guard = ( $mode === 'system' )
490		- ? 'if(!(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches)){return;}'
491		- : '';
492		- $bridge = '(function(){'
493		- . $apply_guard
494		- . 'var URL=' . wp_json_encode( $dark_js_url ) . ';'
495		- . 'function looksLikeEditor(ifr){try{if(ifr.name==="editor-canvas")return true;var d=ifr.contentDocument;return !!(d&&d.body&&d.body.classList&&(d.body.classList.contains("block-editor-iframe__body")||d.body.classList.contains("editor-styles-wrapper")));}catch(e){return false;}}'
496		- . 'function activate(w){try{if(w&&w.AdminifyDarkMode){w.AdminifyDarkMode.enable({brightness:120});return true;}}catch(e){}return false;}'
497		- . 'function inject(ifr){try{var d=ifr.contentDocument,w=ifr.contentWindow;if(!d||!w)return;if(w.__adminifyDM){activate(w);return;}w.__adminifyDM=true;if(activate(w))return;var s=d.createElement("script");s.src=URL;s.onload=function(){if(!activate(w)){setTimeout(function(){activate(w);},100);setTimeout(function(){activate(w);},500);}};(d.head||d.documentElement||d.body).appendChild(s);}catch(e){}}'
498		- . 'var seen=new WeakSet();'
499		- . 'function watch(ifr){if(seen.has(ifr))return;seen.add(ifr);inject(ifr);ifr.addEventListener("load",function(){try{ifr.contentWindow.__adminifyDM=false;}catch(e){}inject(ifr);});}'
500		- . 'function scan(){var all=document.querySelectorAll("iframe");for(var i=0;i<all.length;i++){if(looksLikeEditor(all[i]))watch(all[i]);}}'
501		- . 'if(document.readyState!=="loading"){scan();}else{document.addEventListener("DOMContentLoaded",scan);}'
502		- . 'new MutationObserver(scan).observe(document.documentElement,{childList:true,subtree:true});'
503		- . '}());';
504		- if ( function_exists( 'wp_print_inline_script_tag' ) ) {
505		- wp_print_inline_script_tag( $bridge );
506		- } else {
507		- echo '<script>' . $bridge . '</script>'; // phpcs:ignore WordPress.WP.EnqueuedResources
508		- }
509		- return; // sentinel — never reach legacy enqueue path below
510		- }
511		-
512		- /**
513		- * Inject the AdminifyDarkMode script INTO every classic-editor TinyMCE iframe.
514		- *
515		- * The TinyMCE Visual tab renders post content inside an iframe (`#content_ifr`,
516		- * generally `{editor_id}_ifr`) whose body carries the `mce-content-body` class.
517		- * As with the block-editor canvas, the parent Darkreader run never touches the
518		- * iframe document, so the editor background stays white in dark mode. The bridge
519		- * below watches for TinyMCE iframes (created lazily, and re-created when toggling
520		- * Visual/Text or initializing extra editors), injects the dark-mode JS into each
521		- * iframe's document and calls `AdminifyDarkMode.enable()` from inside. `__adminifyDM`
522		- * guards against double-injection per iframe window.
523		- */
524		- public function inject_darkmode_into_classic_editor_iframe()
525		- {
526		- $mode = $this->pxlbsadminify_resolve_color_mode();
527		- if ( $mode === 'auto' ) {
528		- $mode = 'system';
529		- }
530		- // 'dark' = always on; 'system' = follow OS prefers-color-scheme (decided client-side).
531		- if ( $mode !== 'dark' && $mode !== 'system' ) {
532		- return;
533		- }
534		- $dark_js_url = PXLBSADMINIFY_ASSETS . 'admin/js/wp-adminify-dark-mode' . Utils::assets_ext( '.js' );
535		- // For 'system' mode, only proceed when the OS currently prefers dark; otherwise bail
536		- // out of the bridge entirely so the iframe stays light (matches the parent admin).
537		- $apply_guard = ( $mode === 'system' )
538		- ? 'if(!(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches)){return;}'
539		- : '';
540		- $bridge = '(function(){'
541		- . $apply_guard
542		- . 'var URL=' . wp_json_encode( $dark_js_url ) . ';'
543		- . 'function looksLikeMCE(ifr){try{if(/_ifr$/.test(ifr.id||""))return true;var d=ifr.contentDocument;return !!(d&&d.body&&d.body.classList&&d.body.classList.contains("mce-content-body"));}catch(e){return false;}}'
544		- . 'function activate(w){try{if(w&&w.AdminifyDarkMode){w.AdminifyDarkMode.enable({brightness:120});return true;}}catch(e){}return false;}'
545		- . 'function inject(ifr){try{var d=ifr.contentDocument,w=ifr.contentWindow;if(!d||!w||!d.body)return;if(w.__adminifyDM){activate(w);return;}w.__adminifyDM=true;if(activate(w))return;var s=d.createElement("script");s.src=URL;s.onload=function(){if(!activate(w)){setTimeout(function(){activate(w);},100);setTimeout(function(){activate(w);},500);}};(d.head||d.documentElement||d.body).appendChild(s);}catch(e){}}'
546		- . 'var seen=new WeakSet();'
547		- . 'function watch(ifr){if(seen.has(ifr))return;seen.add(ifr);inject(ifr);ifr.addEventListener("load",function(){try{ifr.contentWindow.__adminifyDM=false;}catch(e){}inject(ifr);});}'
548		- . 'function scan(){var all=document.querySelectorAll("iframe");for(var i=0;i<all.length;i++){if(looksLikeMCE(all[i]))watch(all[i]);}}'
549		- . 'if(document.readyState!=="loading"){scan();}else{document.addEventListener("DOMContentLoaded",scan);}'
550		- . 'new MutationObserver(scan).observe(document.documentElement,{childList:true,subtree:true});'
551		- . '}());';
552		- if ( function_exists( 'wp_print_inline_script_tag' ) ) {
553		- wp_print_inline_script_tag( $bridge );
554		- } else {
555		- echo '<script>' . $bridge . '</script>'; // phpcs:ignore WordPress.WP.EnqueuedResources
556		- }
557		- }
558		-
559		- /**
560		- * customize.php controls: Adminify's general scripts are deliberately skipped on
561		- * customize.php (Assets::should_skip_adminify_scripts), so dark-mode never reaches
562		- * the controls panel. Enqueue dark-mode standalone on the customize controls hook.
563		- */
564		- public function customize_controls_darkmode_enqueue()
565		- {
566		- $mode = $this->pxlbsadminify_resolve_color_mode();
567		- if ($mode === 'auto') {
568		- $mode = 'system';
569		- }
570		- if ($mode !== 'dark' && $mode !== 'system') {
571		- return;
572		- }
573		- wp_enqueue_script(
574		- 'adminify--dark-mode',
575		- PXLBSADMINIFY_ASSETS . 'admin/js/wp-adminify-dark-mode' . Utils::assets_ext('.js'),
576		- array(),
577		- PXLBSADMINIFY_VER,
578		- false
579		- );
580		- wp_add_inline_script('adminify--dark-mode', $this->darkmode_enable_inline($mode));
581		- }
582		-
583		- /**
584		- * Build the inline enable() snippet. For 'dark' it always enables; for 'system' it
585		- * enables only when the OS currently prefers dark (prefers-color-scheme), matching
586		- * the parent-admin behavior in Assets::header_scripts.
587		- */
588		- private function darkmode_enable_inline($mode)
589		- {
590		- $enable = ($mode === 'system')
591		- ? 'if(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches){window.AdminifyDarkMode.enable({brightness:120});}'
592		- : 'window.AdminifyDarkMode.enable({brightness:120});';
593		- return 'if(window.AdminifyDarkMode){' . $enable . '}'
594		- . 'addEventListener("load",function(){if(window.AdminifyDarkMode){' . $enable . '}});';
595		- }
596		-
597		- /**
598		- * customize.php preview: the previewed theme renders inside the preview iframe,
599		- * which the controls-panel enqueue never reaches. customize_preview_init runs in
600		- * the preview frame's frontend context, so enqueue the dark-mode JS here and call
601		- * .enable() to darken the previewed site dynamically — same as the classic editor.
602		- */
603		- public function customize_preview_darkmode_enqueue()
604		- {
605		- $mode = $this->pxlbsadminify_resolve_color_mode();
606		- if ($mode === 'auto') {
607		- $mode = 'system';
608		- }
609		- if ($mode !== 'dark' && $mode !== 'system') {
610		- return;
611		- }
612		- wp_enqueue_script(
613		- 'adminify--dark-mode',
614		- PXLBSADMINIFY_ASSETS . 'admin/js/wp-adminify-dark-mode' . Utils::assets_ext('.js'),
615		- array(),
616		- PXLBSADMINIFY_VER,
617		- false
618		- );
619		- wp_add_inline_script('adminify--dark-mode', $this->darkmode_enable_inline($mode));
	395	+ wp_add_inline_style('wp-adminify-admin', wp_strip_all_tags($dark_mode_style));
620	396	}
621	397	}