From 44e6c89e35e539554b59b374fd7a27212d184eac Mon Sep 17 00:00:00 2001 From: Ryan Cramer Date: Fri, 23 May 2025 16:35:32 -0400 Subject: [PATCH] A few small updates to default AdminThemeUikit theme module config --- .../AdminThemeUikit/themes/default/config.js | 46 +++++++++++++++++-- .../AdminThemeUikit/themes/default/config.php | 31 +++++++------ .../AdminThemeUikit/themes/default/ready.php | 3 +- 3 files changed, 61 insertions(+), 19 deletions(-) diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.js b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.js index 4e74ee21..fe36c14b 100644 --- a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.js +++ b/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() { ""); } + 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'); - setButtonColor(styleName === 'light' ? 'black' : getMainColor()); + //$('#defaultMainColor input').eq(0).trigger('input'); + 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(); }); diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php index 4e513661..1156205d 100644 --- a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php +++ b/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 = $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); +$f->showIf = 'defaultMainColor=custom, defaultToggles=use2Colors'; $inputfields->add($f); $url = $adminTheme->url() . 'themes/default/examples/'; diff --git a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/ready.php b/wire/modules/AdminTheme/AdminThemeUikit/themes/default/ready.php index 38a0bd2d..ac8af79b 100644 --- a/wire/modules/AdminTheme/AdminThemeUikit/themes/default/ready.php +++ b/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";