← All changes | includes/admin/shared/dark-theme.php +28 -14 51.1.44 → 51.1.83 View file →

		@@ -19,13 +19,14 @@
19	19	[],
20	20	KING_ADDONS_VERSION
21	21	);
22	22
23		-// Theme mode is per-user.
	23	+// Theme mode is per-user. Must be global so functions can access it.
	24	+global $ka_theme_mode;
24	25	$ka_theme_mode = get_user_meta(get_current_user_id(), 'king_addons_theme_mode', true);
25	26	$ka_allowed_theme_modes = ['dark', 'light', 'auto'];
26	27	if (!in_array($ka_theme_mode, $ka_allowed_theme_modes, true)) {
27		- $ka_theme_mode = 'dark';
	28	+ $ka_theme_mode = 'auto';
28	29	}
29	30
30	31	/**
31	32	* Output the dark theme toggle HTML
		@@ -32,13 +33,22 @@
32	33	*/
33	34	function ka_render_dark_theme_toggle() {
34	35	global $ka_theme_mode;
35	36	?>
36		- <div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="Theme" data-active="<?php echo esc_attr($ka_theme_mode); ?>">
	37	+ <div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="<?php echo esc_attr(esc_html__('Theme', 'king-addons')); ?>" data-active="<?php echo esc_attr($ka_theme_mode); ?>">
37	38	<span class="ka-v3-segmented-indicator" aria-hidden="true"></span>
38		- <button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $ka_theme_mode === 'light' ? 'true' : 'false'; ?>"><?php esc_html_e('Light', 'king-addons'); ?></button>
39		- <button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $ka_theme_mode === 'dark' ? 'true' : 'false'; ?>"><?php esc_html_e('Dark', 'king-addons'); ?></button>
40		- <button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $ka_theme_mode === 'auto' ? 'true' : 'false'; ?>"><?php esc_html_e('Auto', 'king-addons'); ?></button>
	39	+ <button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $ka_theme_mode === 'light' ? 'true' : 'false'; ?>">
	40	+ <span class="ka-v3-segmented-icon" aria-hidden="true">☀︎</span>
	41	+ <?php esc_html_e('Light', 'king-addons'); ?>
	42	+ </button>
	43	+ <button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $ka_theme_mode === 'dark' ? 'true' : 'false'; ?>">
	44	+ <span class="ka-v3-segmented-icon" aria-hidden="true">☾</span>
	45	+ <?php esc_html_e('Dark', 'king-addons'); ?>
	46	+ </button>
	47	+ <button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $ka_theme_mode === 'auto' ? 'true' : 'false'; ?>">
	48	+ <span class="ka-v3-segmented-icon" aria-hidden="true">◐</span>
	49	+ <?php esc_html_e('Auto', 'king-addons'); ?>
	50	+ </button>
41	51	</div>
42	52	<?php
43	53	}
44	54
		@@ -348,8 +358,20 @@
348	358	.ka-dark-theme a:hover {
349	359	color: #a5b4fc;
350	360	}
351	361
	362	+ .ka-dark-theme a.ka-hf-btn-primary {
	363	+ color: #fff;
	364	+ }
	365	+
	366	+ .ka-dark-theme a.ka-wb-dropdown-item{
	367	+ color: var(--ka-wb-text);
	368	+ }
	369	+
	370	+ .ka-dark-theme a.ka-wb-dropdown-item.is-danger {
	371	+ color: #ff3b30;
	372	+}
	373	+
352	374	/* Stat cards */
353	375	.ka-dark-theme .ka-stat-value,
354	376	.ka-dark-theme .ka-stat-number {
355	377	color: #f1f5f9;
		@@ -450,11 +472,8 @@
450	472	let themeMode = ($('#ka-v3-theme-segment').attr('data-active') || 'dark').toString();
451	473	let themeMqlHandler = null;
452	474
453	475	function applyThemeClasses(isDark) {
454		- // Add no-transition class to prevent animations during switch
455		- $('body').addClass('ka-no-transition');
456		-
457	476	if (isDark) {
458	477	$('body').addClass('ka-dark-theme');
459	478	} else {
460	479	$('body').removeClass('ka-dark-theme');
		@@ -461,13 +480,8 @@
461	480	}
462	481
463	482	$('body').toggleClass('ka-v3-dark', isDark);
464	483	document.documentElement.classList.toggle('ka-v3-dark', isDark);
465		-
466		- // Remove no-transition class after a brief delay
467		- setTimeout(function() {
468		- $('body').removeClass('ka-no-transition');
469		- }, 50);
470	484	}
471	485
472	486	function updateSegment(mode) {
473	487	var $segment = $('#ka-v3-theme-segment');