← All changes | Inc/Classes/DarkModeConflicts.php +68 -98 4.2.10 → 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,65 +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		- $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	508	* Inject the AdminifyDarkMode script INTO every classic-editor TinyMCE iframe.
514	509	*
515	510	* The TinyMCE Visual tab renders post content inside an iframe (`#content_ifr`,
516	511	* generally `{editor_id}_ifr`) whose body carries the `mce-content-body` class.
		@@ -591,31 +586,6 @@
591	586	? 'if(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches){window.AdminifyDarkMode.enable({brightness:120});}'
592	587	: 'window.AdminifyDarkMode.enable({brightness:120});';
593	588	return 'if(window.AdminifyDarkMode){' . $enable . '}'
594	589	. '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));
620	590	}
621	591	}