← All changes | Inc/Classes/DarkModeConflicts.php +8 -193 4.2.16 → 3.2.4.1 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	*/
		@@ -17,35 +17,18 @@
17	17	*/
18	18
19	19	class DarkModeConflicts
20	20	{
21		- public $options;
22		-
23	21	public function __construct()
24	22	{
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		- // 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.)
32		- // Classic editor (TinyMCE) renders the Visual tab inside its own iframe
33		- // (#content_ifr). Same iframe-isolation problem as the block canvas: the
34		- // parent Darkreader run can't reach the iframe DOM, so the editor body
35		- // stays white in dark mode. Inject the same script into TinyMCE iframes.
36		- add_action('admin_footer', array($this, 'inject_darkmode_into_classic_editor_iframe'), 999);
37		- // customize.php controls: Adminify scripts are skipped there by design
38		- // (Assets::should_skip_adminify_scripts), so enqueue dark-mode only on this
39		- // dedicated hook to keep the customize panel dark without the rest of Adminify.
40		- add_action('customize_controls_enqueue_scripts', array($this, 'customize_controls_darkmode_enqueue'));
	23	+ add_action('admin_enqueue_scripts', array($this, 'jltwp_adminify_darkmode_scripts'), 100);
41	24	}
42	25
43		- public function darkmode_scripts()
	26	+ public function jltwp_adminify_darkmode_scripts()
44	27	{
45	28
46	29	$this->options = (array) AdminSettings::get_instance()->get();
47		- $this->options = !empty($this->options['light_dark_mode']['admin_ui_mode']) ? $this->options['light_dark_mode']['admin_ui_mode'] : '';
	30	+ $this->options = !empty($this->options['admin_bar_mode']) ? $this->options['admin_bar_mode'] : '';
48	31
49	32	if ($this->options == 'light') {
50	33	return;
51	34	}
		@@ -406,175 +389,7 @@
406	389
407	390	$dark_mode_style = preg_replace('#/\*.*?\*/#s', '', $dark_mode_style);
408	391	$dark_mode_style = preg_replace('/\s*([{}|:;,])\s+/', '$1', $dark_mode_style);
409	392	$dark_mode_style = preg_replace('/\s\s+(.*)/', '$1', $dark_mode_style);
410		- wp_add_inline_style('adminify-admin', wp_strip_all_tags($dark_mode_style));
411		- }
412		-
413		- /**
414		- * Gutenberg Block Editor Dark Mode CSS
415		- */
416		- function gutenberg_block_editor_darkmode_assets () {
417		-
418		- wp_register_style('adminify-gutenberg-dark', false, array(), PXLBSADMINIFY_VER);
419		- wp_enqueue_style('adminify-gutenberg-dark');
420		-
421		- // $parent_selector = 'body.wp-adminify.adminify-dark-mode';
422		- $parent_selector = 'body.wp-adminify';
423		-
424		- $dark_mode_style = "$parent_selector .components-modal__content .components-text,
425		- $parent_selector .components-popover__content .components-text { color: black!important; }
426		- $parent_selector .block-editor-block-inspector .components-tools-panel { border-top-color: #e0e0e0; }
427		- $parent_selector .admin-ui-navigable-region .components-panel__header > div > button { color: black; }
428		- $parent_selector .editor-sidebar__panel .editor-post-card-panel__header svg,
429		- $parent_selector .commands-command-menu__container .commands-command-menu__header svg { fill: black; }
430		- /** Typography & Size */
431		- $parent_selector .components-toggle-group-control {
432		- background: #1e1e1e!important; border-color: #4a4a4a!important;
433		- }
434		- /* Advanced > ADDITIONAL CSS textarea + WIDTH/number/unit inputs render white
435		- (the dark engine skips them), clashing with the dark inspector. Force dark. */
436		- $parent_selector .block-editor-block-inspector textarea,
437		- $parent_selector .block-editor-block-inspector .components-textarea-control__input,
438		- $parent_selector .block-editor-block-inspector input[type=\"number\"],
439		- $parent_selector .block-editor-block-inspector input[type=\"text\"],
440		- $parent_selector .block-editor-block-inspector .components-input-control__input,
441		- $parent_selector .block-editor-block-inspector .components-unit-control input {
442		- background: #1e1e1e!important; color: #f0f0f1!important; border-color: #4a4a4a!important;
443		- }
444		- /* Unit suffix/select (the \"px\" box) is a separate element the engine leaves
445		- white — force it dark to match the WIDTH input. */
446		- $parent_selector .block-editor-block-inspector .components-unit-control__unit-select,
447		- $parent_selector .block-editor-block-inspector .components-unit-control select,
448		- $parent_selector .block-editor-block-inspector .components-input-control__suffix,
449		- $parent_selector .block-editor-block-inspector .components-input-control__suffix * {
450		- background: #1e1e1e!important; color: #f0f0f1!important; border-color: #4a4a4a!important;
451		- }
452		- /* ToolsPanel \"Settings\" three-dot dropdown menu: item labels (e.g. WIDTH) render
453		- dark on the dark popover and disappear — force them light. The newer block
454		- editor uses an Ariakit menu with hashed class names (css-*-Item-baseItem), so
455		- target the ARIA roles too, not just the legacy .components-menu-item__item. */
456		- $parent_selector .components-dropdown-menu__menu .components-menu-item__item,
457		- $parent_selector .components-menu-group .components-menu-item__item,
458		- $parent_selector [role=\"menu\"] .components-menu-item__item,
459		- $parent_selector [role=\"menu\"] [role=\"menuitem\"],
460		- $parent_selector [role=\"menu\"] [role=\"menuitemcheckbox\"],
461		- $parent_selector [role=\"menu\"] [role=\"menuitemradio\"],
462		- $parent_selector [role=\"menu\"] [role=\"menuitem\"] *,
463		- $parent_selector [role=\"menu\"] [role=\"menuitemcheckbox\"] *,
464		- $parent_selector [role=\"menu\"] [role=\"menuitemradio\"] * {
465		- color: #f0f0f1!important;
466		- }
467		- /* Block card description (text under the block name, e.g. \"A single column
468		- within a columns block\") renders too dark to read — force a light color. */
469		- $parent_selector .block-editor-block-inspector .block-editor-block-card__description,
470		- $parent_selector .block-editor-block-card__description {
471		- color: #c0c0c5!important;
472		- }
473		- /* Inspector tab icons (Settings gear / Styles) render dark on the dark panel —
474		- force a light fill so they stay visible. */
475		- $parent_selector .block-editor-block-inspector [role=\"tab\"] svg,
476		- $parent_selector .block-editor-block-inspector-tabs__tablist svg {
477		- fill: #e0e0e0!important;
478		- }
479		- ";
480		- wp_add_inline_style('adminify-gutenberg-dark', wp_strip_all_tags($dark_mode_style));
481		- }
482		-
483		- /**
484		- * Resolve the active light/dark mode for the current user.
485		- * Per-user `color_mode` meta takes precedence over the global setting.
486		- * Returns 'light' | 'dark' | 'auto' | ''.
487		- */
488		- public function pxlbsadminify_resolve_color_mode()
489		- {
490		- $opts = (array) AdminSettings::get_instance()->get();
491		- $global_mode = !empty($opts['light_dark_mode']['admin_ui_mode']) ? $opts['light_dark_mode']['admin_ui_mode'] : 'light';
492		- $user_mode = get_user_meta(get_current_user_id(), 'color_mode', true);
493		- return !empty($user_mode) ? $user_mode : $global_mode;
494		- }
495		-
496		- /**
497		- * Inject the AdminifyDarkMode script INTO every classic-editor TinyMCE iframe.
498		- *
499		- * The TinyMCE Visual tab renders post content inside an iframe (`#content_ifr`,
500		- * generally `{editor_id}_ifr`) whose body carries the `mce-content-body` class.
501		- * As with the block-editor canvas, the parent Darkreader run never touches the
502		- * iframe document, so the editor background stays white in dark mode. The bridge
503		- * below watches for TinyMCE iframes (created lazily, and re-created when toggling
504		- * Visual/Text or initializing extra editors), injects the dark-mode JS into each
505		- * iframe's document and calls `AdminifyDarkMode.enable()` from inside. `__adminifyDM`
506		- * guards against double-injection per iframe window.
507		- */
508		- public function inject_darkmode_into_classic_editor_iframe()
509		- {
510		- $mode = $this->pxlbsadminify_resolve_color_mode();
511		- if ( $mode === 'auto' ) {
512		- $mode = 'system';
513		- }
514		- // 'dark' = always on; 'system' = follow OS prefers-color-scheme (decided client-side).
515		- if ( $mode !== 'dark' && $mode !== 'system' ) {
516		- return;
517		- }
518		- $dark_js_url = PXLBSADMINIFY_ASSETS . 'admin/js/wp-adminify-dark-mode' . Utils::assets_ext( '.js' );
519		- // For 'system' mode, only proceed when the OS currently prefers dark; otherwise bail
520		- // out of the bridge entirely so the iframe stays light (matches the parent admin).
521		- $apply_guard = ( $mode === 'system' )
522		- ? 'if(!(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches)){return;}'
523		- : '';
524		- $bridge = '(function(){'
525		- . $apply_guard
526		- . 'var URL=' . wp_json_encode( $dark_js_url ) . ';'
527		- . '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;}}'
528		- . 'function activate(w){try{if(w&&w.AdminifyDarkMode){w.AdminifyDarkMode.enable({brightness:120});return true;}}catch(e){}return false;}'
529		- . '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){}}'
530		- . 'var seen=new WeakSet();'
531		- . '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);});}'
532		- . 'function scan(){var all=document.querySelectorAll("iframe");for(var i=0;i<all.length;i++){if(looksLikeMCE(all[i]))watch(all[i]);}}'
533		- . 'if(document.readyState!=="loading"){scan();}else{document.addEventListener("DOMContentLoaded",scan);}'
534		- . 'new MutationObserver(scan).observe(document.documentElement,{childList:true,subtree:true});'
535		- . '}());';
536		- if ( function_exists( 'wp_print_inline_script_tag' ) ) {
537		- wp_print_inline_script_tag( $bridge );
538		- } else {
539		- echo '<script>' . $bridge . '</script>'; // phpcs:ignore WordPress.WP.EnqueuedResources
540		- }
541		- }
542		-
543		- /**
544		- * customize.php controls: Adminify's general scripts are deliberately skipped on
545		- * customize.php (Assets::should_skip_adminify_scripts), so dark-mode never reaches
546		- * the controls panel. Enqueue dark-mode standalone on the customize controls hook.
547		- */
548		- public function customize_controls_darkmode_enqueue()
549		- {
550		- $mode = $this->pxlbsadminify_resolve_color_mode();
551		- if ($mode === 'auto') {
552		- $mode = 'system';
553		- }
554		- if ($mode !== 'dark' && $mode !== 'system') {
555		- return;
556		- }
557		- wp_enqueue_script(
558		- 'adminify--dark-mode',
559		- PXLBSADMINIFY_ASSETS . 'admin/js/wp-adminify-dark-mode' . Utils::assets_ext('.js'),
560		- array(),
561		- PXLBSADMINIFY_VER,
562		- false
563		- );
564		- wp_add_inline_script('adminify--dark-mode', $this->darkmode_enable_inline($mode));
565		- }
566		-
567		- /**
568		- * Build the inline enable() snippet. For 'dark' it always enables; for 'system' it
569		- * enables only when the OS currently prefers dark (prefers-color-scheme), matching
570		- * the parent-admin behavior in Assets::header_scripts.
571		- */
572		- private function darkmode_enable_inline($mode)
573		- {
574		- $enable = ($mode === 'system')
575		- ? 'if(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches){window.AdminifyDarkMode.enable({brightness:120});}'
576		- : 'window.AdminifyDarkMode.enable({brightness:120});';
577		- return 'if(window.AdminifyDarkMode){' . $enable . '}'
578		- . 'addEventListener("load",function(){if(window.AdminifyDarkMode){' . $enable . '}});';
	393	+ wp_add_inline_style('wp-adminify-admin', wp_strip_all_tags($dark_mode_style));
579	394	}
580	395	}