← All changes | Inc/Classes/DarkModeConflicts.php +95 -85 4.2.9 → 4.3.2 View file →

		@@ -23,15 +23,13 @@
23	23	public function __construct()
24	24	{
25	25	add_action('admin_enqueue_scripts', array($this, 'darkmode_scripts'), 100);
26	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);
	27	+ // Block editor canvas (iframe[name="editor-canvas"]) is a frontend style
	28	+ // PREVIEW — Adminify is an admin-focus plugin, so dark mode must NOT darken
	29	+ // the previewed content. Only the controller chrome (sidebar/panels) goes
	30	+ // dark, handled by the parent-admin dark mode + gutenberg_block_editor_darkmode_assets.
	31	+ // (Intentionally no iframe injection into the block canvas.)
34	32	// Classic editor (TinyMCE) renders the Visual tab inside its own iframe
35	33	// (#content_ifr). Same iframe-isolation problem as the block canvas: the
36	34	// parent Darkreader run can't reach the iframe DOM, so the editor body
37	35	// stays white in dark mode. Inject the same script into TinyMCE iframes.
		@@ -39,14 +37,8 @@
39	37	// customize.php controls: Adminify scripts are skipped there by design
40	38	// (Assets::should_skip_adminify_scripts), so enqueue dark-mode only on this
41	39	// dedicated hook to keep the customize panel dark without the rest of Adminify.
42	40	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'));
49	41	}
50	42
51	43	public function darkmode_scripts()
52	44	{
		@@ -428,14 +420,74 @@
428	420
429	421	// $parent_selector = 'body.wp-adminify.adminify-dark-mode';
430	422	$parent_selector = 'body.wp-adminify';
431	423
432		- $dark_mode_style = "$parent_selector .components-modal__content .components-text,
433		- $parent_selector .components-popover__content .components-text { color: black!important; }
	424	+ $dark_mode_style = "$parent_selector .editor-document-bar__title .editor-document-bar__post-title {color: black;}
	425	+ $parent_selector .interface-complementary-area {border-left: 1px solid #dedee7!important;}
	426	+ $parent_selector .block-editor-inserter__main-area .block-editor-tabbed-sidebar .block-editor-tabbed-sidebar__tablist button, .block-editor-tabbed-sidebar .block-editor-tabbed-sidebar__tab {color: black;}
	427	+ $parent_selector .block-editor-inserter__main-area .block-editor-inserter__category-tablist button {color: black;}
	428	+ $parent_selector .interface-interface-skeleton__body .interface-interface-skeleton__secondary-sidebar {border-right: 1px solid #e0e0e0;}
	429	+ $parent_selector .block-editor__container .edit-post-header {border-bottom: 1px solid #e0e0e0}
	430	+ $parent_selector .components-modal__content .components-text,
	431	+ $parent_selector .components-panel .components-text,
	432	+ $parent_selector .components-popover__content .components-text,
	433	+ $parent_selector .preferences__tabs button[aria-selected=false] > span { color: black!important; }
434	434	$parent_selector .block-editor-block-inspector .components-tools-panel { border-top-color: #e0e0e0; }
435	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,
	436	+ $parent_selector .editor-sidebar__panel .editor-post-card-panel__header svg,
437	437	$parent_selector .commands-command-menu__container .commands-command-menu__header svg { fill: black; }
	438	+ /** Typography & Size */
	439	+ $parent_selector .components-toggle-group-control {
	440	+ background: #1e1e1e!important; border-color: #4a4a4a!important;
	441	+ }
	442	+ /* Advanced > ADDITIONAL CSS textarea + WIDTH/number/unit inputs render white
	443	+ (the dark engine skips them), clashing with the dark inspector. Force dark. */
	444	+ $parent_selector .block-editor-block-inspector textarea,
	445	+ $parent_selector .block-editor-block-inspector .components-textarea-control__input,
	446	+ $parent_selector .block-editor-block-inspector input[type=\"number\"],
	447	+ $parent_selector .block-editor-block-inspector input[type=\"text\"],
	448	+ $parent_selector .block-editor-block-inspector .components-input-control__input,
	449	+ $parent_selector .block-editor-block-inspector .components-unit-control input {
	450	+ background: #1e1e1e!important; color: #f0f0f1!important; border-color: #4a4a4a!important;
	451	+ }
	452	+ /* Unit suffix/select (the \"px\" box) is a separate element the engine leaves
	453	+ white — force it dark to match the WIDTH input. Its popover is an Ariakit
	454	+ dialog, so match it on the attributes it carries WHILE OPEN; a bare
	455	+ [data-dialog] also hits every closed one and any other dialog on the page. */
	456	+ $parent_selector div[data-dialog][data-open=\"true\"][role=\"menu\"],
	457	+ $parent_selector .block-editor-block-inspector .components-unit-control__unit-select,
	458	+ $parent_selector .block-editor-block-inspector .components-unit-control select,
	459	+ $parent_selector .block-editor-block-inspector .components-input-control__suffix,
	460	+ $parent_selector .block-editor-block-inspector .components-input-control__suffix * {
	461	+ background: #1e1e1e!important; color: #f0f0f1!important; border-color: #4a4a4a!important;
	462	+ }
	463	+ /* ToolsPanel \"Settings\" three-dot dropdown menu: item labels (e.g. WIDTH) render
	464	+ dark on the dark popover and disappear — force them light. The newer block
	465	+ editor uses an Ariakit menu with hashed class names (css-*-Item-baseItem), so
	466	+ target the ARIA roles too, not just the legacy .components-menu-item__item. */
	467	+ $parent_selector .components-dropdown-menu__menu .components-menu-item__item,
	468	+ $parent_selector .components-menu-group .components-menu-item__item,
	469	+ $parent_selector [role=\"menu\"] .components-menu-item__item,
	470	+ $parent_selector [role=\"menu\"] [role=\"menuitem\"],
	471	+ $parent_selector [role=\"menu\"] [role=\"menuitemcheckbox\"],
	472	+ $parent_selector [role=\"menu\"] [role=\"menuitemradio\"],
	473	+ $parent_selector [role=\"menu\"] [role=\"menuitem\"] *,
	474	+ $parent_selector [role=\"menu\"] [role=\"menuitemcheckbox\"] *,
	475	+ $parent_selector [role=\"menu\"] [role=\"menuitemradio\"] * {
	476	+ color: #f0f0f1!important;
	477	+ }
	478	+ /* Block card description (text under the block name, e.g. \"A single column
	479	+ within a columns block\") renders too dark to read — force a light color. */
	480	+ $parent_selector .block-editor-block-inspector .block-editor-block-card__description,
	481	+ $parent_selector .block-editor-block-card__description {
	482	+ color: #c0c0c5!important;
	483	+ }
	484	+ /* Inspector tab icons (Settings gear / Styles) render dark on the dark panel —
	485	+ force a light fill so they stay visible. */
	486	+ $parent_selector .block-editor-block-inspector [role=\"tab\"] svg,
	487	+ $parent_selector .block-editor-block-inspector-tabs__tablist svg {
	488	+ fill: #e0e0e0!important;
	489	+ }
438	490	";
439	491	wp_add_inline_style('adminify-gutenberg-dark', wp_strip_all_tags($dark_mode_style));
440	492	}
441	493
		@@ -452,54 +504,8 @@
452	504	return !empty($user_mode) ? $user_mode : $global_mode;
453	505	}
454	506
455	507	/**
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		- if ( $this->pxlbsadminify_resolve_color_mode() !== 'dark' ) {
470		- return;
471		- }
472		- // Only run on block-editor pages (post.php / post-new.php / site editor).
473		- $screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
474		- if ( ! $screen || ! method_exists( $screen, 'is_block_editor' ) || ! $screen->is_block_editor() ) {
475		- // also accept Site Editor screen ids
476		- $is_site_editor = $screen && in_array( $screen->id, array( 'site-editor', 'gutenberg_page_gutenberg-edit-site' ), true );
477		- if ( ! $is_site_editor ) {
478		- return;
479		- }
480		- }
481		- $dark_js_url = PXLBSADMINIFY_ASSETS . 'admin/js/wp-adminify-dark-mode' . Utils::assets_ext( '.js' );
482		- $bridge = '(function(){'
483		- . 'var URL=' . wp_json_encode( $dark_js_url ) . ';'
484		- . '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;}}'
485		- . 'function activate(w){try{if(w&&w.AdminifyDarkMode){w.AdminifyDarkMode.enable({brightness:120});return true;}}catch(e){}return false;}'
486		- . '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){}}'
487		- . 'var seen=new WeakSet();'
488		- . '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);});}'
489		- . 'function scan(){var all=document.querySelectorAll("iframe");for(var i=0;i<all.length;i++){if(looksLikeEditor(all[i]))watch(all[i]);}}'
490		- . 'if(document.readyState!=="loading"){scan();}else{document.addEventListener("DOMContentLoaded",scan);}'
491		- . 'new MutationObserver(scan).observe(document.documentElement,{childList:true,subtree:true});'
492		- . '}());';
493		- if ( function_exists( 'wp_print_inline_script_tag' ) ) {
494		- wp_print_inline_script_tag( $bridge );
495		- } else {
496		- echo '<script>' . $bridge . '</script>'; // phpcs:ignore WordPress.WP.EnqueuedResources
497		- }
498		- return; // sentinel — never reach legacy enqueue path below
499		- }
500		-
501		- /**
502	508	* Inject the AdminifyDarkMode script INTO every classic-editor TinyMCE iframe.
503	509	*
504	510	* The TinyMCE Visual tab renders post content inside an iframe (`#content_ifr`,
505	511	* generally `{editor_id}_ifr`) whose body carries the `mce-content-body` class.
		@@ -511,13 +517,24 @@
511	517	* guards against double-injection per iframe window.
512	518	*/
513	519	public function inject_darkmode_into_classic_editor_iframe()
514	520	{
515		- if ( $this->pxlbsadminify_resolve_color_mode() !== 'dark' ) {
	521	+ $mode = $this->pxlbsadminify_resolve_color_mode();
	522	+ if ( $mode === 'auto' ) {
	523	+ $mode = 'system';
	524	+ }
	525	+ // 'dark' = always on; 'system' = follow OS prefers-color-scheme (decided client-side).
	526	+ if ( $mode !== 'dark' && $mode !== 'system' ) {
516	527	return;
517	528	}
518	529	$dark_js_url = PXLBSADMINIFY_ASSETS . 'admin/js/wp-adminify-dark-mode' . Utils::assets_ext( '.js' );
	530	+ // For 'system' mode, only proceed when the OS currently prefers dark; otherwise bail
	531	+ // out of the bridge entirely so the iframe stays light (matches the parent admin).
	532	+ $apply_guard = ( $mode === 'system' )
	533	+ ? 'if(!(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches)){return;}'
	534	+ : '';
519	535	$bridge = '(function(){'
	536	+ . $apply_guard
520	537	. 'var URL=' . wp_json_encode( $dark_js_url ) . ';'
521	538	. '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;}}'
522	539	. 'function activate(w){try{if(w&&w.AdminifyDarkMode){w.AdminifyDarkMode.enable({brightness:120});return true;}}catch(e){}return false;}'
523	540	. '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){}}'
		@@ -540,9 +557,13 @@
540	557	* the controls panel. Enqueue dark-mode standalone on the customize controls hook.
541	558	*/
542	559	public function customize_controls_darkmode_enqueue()
543	560	{
544		- if ($this->pxlbsadminify_resolve_color_mode() !== 'dark') {
	561	+ $mode = $this->pxlbsadminify_resolve_color_mode();
	562	+ if ($mode === 'auto') {
	563	+ $mode = 'system';
	564	+ }
	565	+ if ($mode !== 'dark' && $mode !== 'system') {
545	566	return;
546	567	}
547	568	wp_enqueue_script(
548	569	'adminify--dark-mode',
		@@ -550,32 +571,21 @@
550	571	array(),
551	572	PXLBSADMINIFY_VER,
552	573	false
553	574	);
554		- $inline = 'if(window.AdminifyDarkMode){window.AdminifyDarkMode.enable({brightness:120});}'
555		- . 'addEventListener("load",function(){if(window.AdminifyDarkMode){window.AdminifyDarkMode.enable({brightness:120});}});';
556		- wp_add_inline_script('adminify--dark-mode', $inline);
	575	+ wp_add_inline_script('adminify--dark-mode', $this->darkmode_enable_inline($mode));
557	576	}
558	577
559	578	/**
560		- * customize.php preview: the previewed theme renders inside the preview iframe,
561		- * which the controls-panel enqueue never reaches. customize_preview_init runs in
562		- * the preview frame's frontend context, so enqueue the dark-mode JS here and call
563		- * .enable() to darken the previewed site dynamically — same as the classic editor.
	579	+ * Build the inline enable() snippet. For 'dark' it always enables; for 'system' it
	580	+ * enables only when the OS currently prefers dark (prefers-color-scheme), matching
	581	+ * the parent-admin behavior in Assets::header_scripts.
564	582	*/
565		- public function customize_preview_darkmode_enqueue()
	583	+ private function darkmode_enable_inline($mode)
566	584	{
567		- if ($this->pxlbsadminify_resolve_color_mode() !== 'dark') {
568		- return;
569		- }
570		- wp_enqueue_script(
571		- 'adminify--dark-mode',
572		- PXLBSADMINIFY_ASSETS . 'admin/js/wp-adminify-dark-mode' . Utils::assets_ext('.js'),
573		- array(),
574		- PXLBSADMINIFY_VER,
575		- false
576		- );
577		- $inline = 'if(window.AdminifyDarkMode){window.AdminifyDarkMode.enable({brightness:120});}'
578		- . 'addEventListener("load",function(){if(window.AdminifyDarkMode){window.AdminifyDarkMode.enable({brightness:120});}});';
579		- wp_add_inline_script('adminify--dark-mode', $inline);
	585	+ $enable = ($mode === 'system')
	586	+ ? 'if(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches){window.AdminifyDarkMode.enable({brightness:120});}'
	587	+ : 'window.AdminifyDarkMode.enable({brightness:120});';
	588	+ return 'if(window.AdminifyDarkMode){' . $enable . '}'
	589	+ . 'addEventListener("load",function(){if(window.AdminifyDarkMode){' . $enable . '}});';
580	590	}
581	591	}