A few small updates to default AdminThemeUikit theme module config

wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.js

@@ -30,7 +30,13 @@ $(document).ready(function() {
 	function getMainColor() {
 		var $wrap = $('#wrap_defaultMainColor');
 		var $f = $wrap.find('input:checked');
-		if($f.val() === 'custom') return $('#defaultMainColorCustom').val();
+		if($f.val() === 'custom') {
+			if($('body').hasClass('dark-theme')) {
+				return $('#defaultMainColorCustomDark').val();
+			} else {
+				return $('#defaultMainColorCustom').val();
+			}
+		}
 		return $f.closest('label').find('.defaultMainColorLabel').css('background-color');
 	}
 	
@@ -41,6 +47,9 @@ $(document).ready(function() {
 	 * 
 	 */
 	function setMainColor(value) {
+		if(typeof value === 'undefined') value = getMainColor();
+		console.log('setMainColor', value);
+		
 		$('#main-color-custom').remove();
 		$('.pw-logo-native').css('color', value);
 		
@@ -57,6 +66,12 @@ $(document).ready(function() {
 			"</style>");
 	}
 	
+	function updateToggles() {
+		var $use2Colors = $('#defaultToggles_use2Colors');
+		var hidden = !$('#defaultMainColor_custom').prop('checked');
+		$use2Colors.parent('label').prop('hidden', hidden);
+	}
+	
 	function setButtonColor(value) {
 		$('.ui-button').css('background-color', value);
 	}
@@ -64,20 +79,27 @@ $(document).ready(function() {
 	$('#wrap_defaultStyleName').on('input', 'input', function() {
 		var styleName = $(this).val();
 		$body.removeClass(styleClasses).addClass(styleName + '-theme');
-		$('#defaultMainColor').trigger('input');
+		//$('#defaultMainColor input').eq(0).trigger('input');
-		setButtonColor(styleName === 'light' ? 'black' : getMainColor()); 
+		var color = getMainColor();
+		setMainColor(color);
+		setButtonColor(styleName === 'light' ? 'black' : color); 
 	});
 	
 	$('#wrap_defaultMainColor').on('input', 'input', function() {
 		var value = 'main-color-' + $(this).val();
 		var color;
 		if(value === 'main-color-custom') {
-			color = $('body').hasClass('dark-theme') ? $('#defaultMainColorCustomDark').val() : $('#defaultMainColorCustom').val();
+			if($('#defaultToggles_use2Colors').prop('checked')) {
+				color = $('body').hasClass('dark-theme') ? $('#defaultMainColorCustomDark').val() : $('#defaultMainColorCustom').val();
+			} else {
+				color = $('#defaultMainColorCustom').val();
+			}
 		} else {
 			color = $(this).closest('label').find('.defaultMainColorLabel').css('background'); 
 		}
 		$body.removeClass(colorClasses).addClass(value);
 		setMainColor(color);
+		updateToggles();
 	});
 	
 	$('#defaultMainColorCustom, #defaultMainColorCustomDark').on('input', function() {
@@ -86,7 +108,11 @@ $(document).ready(function() {
 		if($(this).attr('id') === 'defaultMainColorCustomDark') {
 			if($('body').hasClass('dark-theme')) setMainColor(value); 
 		} else {
-			if($('body').hasClass('light-theme')) setMainColor(value);
+			if($('body').hasClass('light-theme')) {
+				setMainColor(value);
+			} else if(!$('#defaultToggles_use2Colors').prop('checked')) {
+				setMainColor(value);
+			}
 		}
 	});
 	
@@ -102,5 +128,15 @@ $(document).ready(function() {
 		if($('body').hasClass('main-color-custom')) {
 			$('#defaultMainColorCustom, #defaultMainColorCustomDark').trigger('input');
 		}
+	});
+	
+	$('#defaultToggles_use2Colors').on('change', function() {
+		if($(this).prop('checked')) {
+			$('#defaultMainColorCustomDark').trigger('input');
+		} else {
+			$('#defaultMainColorCustom').trigger('input');
+		}
 	}); 
+	
+	updateToggles();
 });

wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php

@@ -28,6 +28,22 @@ if(empty($value)) $value = 'auto';
 $f->val($value);
 $inputfields->add($f);
 
+$f = $inputfields->InputfieldCheckboxes;
+$f->attr('id+name', 'defaultToggles');
+$f->label = __('Toggles');
+$f->addOption('noUserMenu',
+	__('Disable light/dark/auto setting in user tools menu?') . ' ' .
+	'[span.detail] ' . __('(this prevents users from making their own dark/light mode selection)') . ' [/span]'
+);
+$f->addOption('use2Colors',
+	__('Define separate main color pickers for light mode and dark mode') . ' ' .
+	'[span.detail] ' . __('(use for more contrast in light or dark mode)') . ' [/span]',
+	[ 'hidden' => 'hidden' ]
+);
+$value = $adminTheme->get($f->name);
+if(is_array($value)) $f->val($value);
+$inputfields->add($f);
+
 $f = $inputfields->InputfieldRadios;
 $f->attr('id+name', 'defaultMainColor'); 
 $f->label = __('Main color'); 
@@ -45,7 +61,7 @@ $inputfields->add($f);
 
 $f = $inputfields->InputfieldText;
 $f->attr('id+name', 'defaultMainColorCustom'); 
-$f->label = __('Custom main color (light mode)'); 
+$f->label = __('Custom main color'); 
 $f->attr('type', 'color');
 $f->showIf = 'defaultMainColor=custom';
 $f->attr('style', 'width: 45px; padding: 1px 4px');
@@ -60,23 +76,12 @@ $f = $inputfields->InputfieldText;
 $f->attr('id+name', 'defaultMainColorCustomDark');
 $f->label = __('Custom main color (dark mode)');
 $f->attr('type', 'color');
-$f->showIf = 'defaultMainColor=custom';
 $f->attr('style', 'width: 45px; padding: 1px 4px');
 $value = (string) $adminTheme->get($f->attr('name'));
 if(empty($value)) $value = $customColorValue;
 if(ctype_alnum(ltrim($value, '#'))) $f->val($value);
 $f->columnWidth = 50;
-$inputfields->add($f);
+$f->showIf = 'defaultMainColor=custom, defaultToggles=use2Colors';
-
-$f = $inputfields->InputfieldCheckboxes;
-$f->attr('id+name', 'defaultToggles');
-$f->label = __('Toggles');
-$f->addOption('noUserMenu', 
-	__('Disable light/dark/auto setting in user tools menu?') . ' ' . 
-	'[span.detail] ' . __('(this prevents users from making their own dark/light mode selection)') . ' [/span]'
-);
-$value = $adminTheme->get($f->name);
-if(is_array($value)) $f->val($value);
 $inputfields->add($f);
 
 $url = $adminTheme->url() . 'themes/default/examples/';

wire/modules/AdminTheme/AdminThemeUikit/themes/default/ready.php

@@ -49,7 +49,8 @@ $adminTheme->addBodyClass("main-color-$mainColor");
 $mainColorCode = isset($mainColors[$mainColor]) ? $mainColors[$mainColor] : $mainColors['red'];
 if(strpos($mainColorCode, '#') === 0 && ctype_alnum(ltrim($mainColorCode, '#'))) {
 	$mainDarkCode = $mainColors['customDark']; 
-	if($mainColor === 'custom' && strpos($mainDarkCode, '#') === 0 && ctype_alnum(ltrim($mainDarkCode, '#'))) {
+	$use2Colors = $mainColor === 'custom' && in_array('use2Colors', $adminTheme->defaultToggles);
+	if($use2Colors && strpos($mainDarkCode, '#') === 0 && ctype_alnum(ltrim($mainDarkCode, '#'))) {
 		$css = "--main-color: light-dark($mainColorCode, $mainDarkCode);";
 	} else {
 		$css = "--main-color: $mainColorCode";