[TikiWiki-commits] [Git][tikiwiki/tiki][30.x] [FIX][UI] Improved color contrast between admin sidebar accordion buttons and...

Gary Cunningham-Lee pushed to branch 30.x at Tiki Wiki CMS Groupware / Tiki


Commits:
4eea516c by Gary Cunningham-Lee at 2026-03-24T21:52:58+09:00
[FIX][UI] Improved color contrast between admin sidebar accordion buttons and...
---
* [FIX][UI] Improved color contrast between admin sidebar accordion buttons and...
---
* [FIX][UI] Improved color contrast between admin sidebar accordion buttons and dropdowns in some themes (thanks, Bernard) and made other admin color adjustments. Todo: check Fivealive and Fivealive-lite theme options.

See merge request tikiwiki/tiki!9830


(cherry picked from commit 0341b4b2b8848e285e516e860acc2649aa7c5fe9)

695825be [FIX][UI] Improved color contrast between admin sidebar accordion buttons and...

Co-authored-by: Gary Cunningham-Lee <gary_c-39LOpZwlz1/[email protected]>

See merge request tikiwiki/tiki!9831

- - - - -


14 changed files:

- themes/darkroom/scss/_variables.scss
- themes/fivealive-lite/options/akebi/scss/_variables.scss
- themes/fivealive-lite/options/kiwi/scss/_variables.scss
- themes/fivealive-lite/options/plum/scss/_variables.scss
- themes/fivealive-lite/scss/_css-variables.scss
- themes/flatly/scss/_variables.scss
- themes/lighty/scss/_variables.scss
- themes/morph/scss/_tiki-selectors.scss
- themes/neubrutiki/scss/_variables.scss
- themes/ohia/scss/_variables.scss
- themes/solar/scss/_variables.scss
- themes/spacelab/scss/_variables.scss
- themes/superhero/scss/_variables.scss
- themes/utopias/scss/_variables.scss


Changes:

=====================================
themes/darkroom/scss/_variables.scss
=====================================
@@ -198,6 +198,9 @@ $card-border-color: transparent;
 $accordion-bg: #2A2A2D;
 $accordion-button-active-color: #fff;
 
+$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>"); // !default for dark mode
+$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>"); // !default for dark mode
+
 // Tooltips
 $tooltip-color: #ffffff;
 $tooltip-bg: #000000;
@@ -249,8 +252,6 @@ $close-text-shadow: 1px 0 #ffffff; // No Bootstrap equivalent
 $code-color: #c7254e;
 $kbd-color: #ffffff;
 $kbd-bg: #333333;
-$pre-color: $gray-800;
-
 
 // - - - - - - - - - -  - - - - - - Tiki SCSS variables - - - - - - - - - - - - - - - - - //
 


=====================================
themes/fivealive-lite/options/akebi/scss/_variables.scss
=====================================
@@ -261,7 +261,7 @@ $tiki-dark-footer-link-hover-color: #8BB9FE;
     --tiki-admin-top-nav-color: #{$navbar-dark-color}; // #f9f9f9;
     --tiki-admin-top-nav-hover-color: #{$navbar-light-hover-color};
     --tiki-admin-top-nav-link-hover-bg: none ;
-    --tiki-admin-aside-nav-bg: var(--tiki-top-bg); // #{$tiki-top-light-bg};
+    --tiki-admin-aside-nav-bg: var(--tiki-fivealive-lite-theme-bg);
     --tiki-admin-aside-nav-color: var(--tiki-admin-top-nav-color);
     --tiki-admin-aside-nav-hover-color: var(--tiki-admin-top-nav-hover-color);
     --tiki-admin-aside-nav-hover-bg: var(--bs-dropdown-link-hover-bg);


=====================================
themes/fivealive-lite/options/kiwi/scss/_variables.scss
=====================================
@@ -258,7 +258,7 @@ $tiki-dark-footer-link-hover-color: #82a653;
 // Dark navbar minus top nav
 @mixin admin-nav-dark {
     --tiki-admin-top-nav-bg: var(--tiki-fivealive-lite-theme-bg); // #96a032;
-    --tiki-admin-top-nav-color: #1E230B;
+    --tiki-admin-top-nav-color: #FAFAFA; // #1E230B;
     --tiki-admin-top-nav-hover-color: #f2f2f2;
 //    --tiki-admin-top-nav-link-hover-bg: #{$navbar-dark-hover-color};
     --tiki-admin-aside-nav-bg: var(--tiki-fivealive-lite-theme-bg); // #96a032;
@@ -305,9 +305,9 @@ $tiki-dark-footer-link-hover-color: #82a653;
 .accordion {
     --bs-accordion-active-bg: #{$dark};
     --bs-accordion-active-color: #fff;
-    --bs-accordion-btn-bg: #6D6609; // #{$primary}; // no $bg-light
+    --bs-accordion-btn-bg: #d4c71b; // #6D6609; // #{$primary}; // no $bg-light
 }
 
 [data-bs-theme=dark] {
 
-}
\ No newline at end of file
+}


=====================================
themes/fivealive-lite/options/plum/scss/_variables.scss
=====================================
@@ -14,7 +14,7 @@ $success:       #5cb85c;
 $info:          #350251;
 $warning:       #f0ad4e;
 $danger:        #ff5c1a;
-$light:         #ffffff;
+$light:         #f6e6ff;
 $dark:          #15001f;
 
 $theme-colors: (
@@ -123,7 +123,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color;
     --bs-dropdown-border-color: rgba(0, 0, 0, 0.15);
     --bs-dropdown-link-color: var(--#{$prefix}body-color); // !default;
     --bs-dropdown-link-hover-color: var(--bs-dropdown-link-color); //  !default;
-    --bs-dropdown-link-hover-bg: #{$component-active-bg};
+    --bs-dropdown-link-hover-bg: #7A04B5FF; // #{$component-active-bg};
     --bs-dropdown-link-active-color: #{$component-active-color}; //  !default;
     --bs-dropdown-link-active-bg: #{$component-active-bg}; //  !default;
     --bs-dropdown-link-disabled-color: var(--#{$prefix}tertiary-color); //  !default;
@@ -247,17 +247,17 @@ $tiki-dark-footer-link-hover-color: #e480bc;
 // Light navbar minus top nav
 @mixin admin-nav-light {
     --tiki-admin-top-nav-bg: var(--tiki-fivealive-lite-utility-color-2); //#49006c;
-    --tiki-admin-navbar-bg: var(--tiki-fivealive-lite-utility-color-2); //#49006c;
     --tiki-admin-top-nav-color: #fff;
     --tiki-admin-top-nav-hover-color: #f9f9f9;
     --tiki-admin-top-nav-hover-bg: none ;
     --tiki-admin-aside-nav-bg: var(--tiki-fivealive-lite-utility-color-2); //#49006c;
-    --tiki-admin-aside-nav-lcolor: var(--tiki-admin-top-nav-color);
+    --tiki-admin-aside-nav-color: var(--tiki-admin-top-nav-color);
     --tiki-admin-aside-nav-hover-color: var(--tiki-admin-top-nav-hover-color);
+    --tiki-admin-aside-nav-hover-bg: var(--bs-dropdown-link-hover-bg);
     --tiki-admin-dropdown-bg: var(--bs-dropdown-bg);
     --tiki-admin-dropdown-link-color: var(--bs-dropdown-link-color);
-    --tiki-admin-dropdown-link-hover-color: #{$dropdown-link-hover-color};
-    --tiki-admin-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+    --tiki-admin-dropdown-link-hover-color: var(--bs-dropdown-link-hover-color);
+    --tiki-admin-dropdown-link-hover-bg: var(--bs-dropdown-link-hover-bg);
     .accordion-button::after {
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
     }


=====================================
themes/fivealive-lite/scss/_css-variables.scss
=====================================
@@ -104,16 +104,17 @@ header.navbar.fixed-top {
 
 // Light navbar minus top nav
 @mixin admin-nav-light {
-    --tiki-admin-navbar-bg: #28AAE1FF;
+    --tiki-admin-top-nav-bg: #28AAE1FF;
     --tiki-admin-top-nav-color: var(--tiki-top-color);
     --tiki-admin-top-nav-hover-color: #{$navbar-dark-hover-color};
     --tiki-admin-top-nav-hover-bg: none ;
+    --tiki-admin-top-box-shadow: 0px 1px 10px #32373d;
     --tiki-admin-aside-nav-bg: #28AAE1FF;
     --tiki-admin-aside-nav-color: var(--tiki-admin-top-nav-color);
     --tiki-admin-aside-nav-hover-color: var(--tiki-admin-top-nav-hover-color);
     --tiki-admin-dropdown-bg: #{$dropdown-bg};
- //   --tiki-admin-dropdown-link-color: #{$dropdown-link-color};
-//    --tiki-admin-dropdown-link-hover-color: #{$dropdown-link-hover-color};
+    --tiki-admin-dropdown-link-color: #{$dropdown-color};
+    --tiki-admin-dropdown-link-hover-color: #{$dropdown-link-hover-color};
     --tiki-admin-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
 }
 
@@ -131,10 +132,10 @@ header.navbar.fixed-top {
     --tiki-admin-aside-nav-bg: var(--tiki-admin-top-nav-bg);
     --tiki-admin-aside-nav-color: var(--tiki-admin-top-nav-color);
     --tiki-admin-aside-nav-hover-color: var(--tiki-admin-top-nav-hover-color);
-    --tiki-admin-dropdown-link-color: #{$dropdown-dark-link-color};
     --tiki-admin-dropdown-bg: #{$dropdown-dark-bg};
-//    --tiki-admin-dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
-//    --tiki-admin-dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
+    --tiki-admin-dropdown-link-color: #{$dropdown-dark-link-color};
+    --tiki-admin-dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
+    --tiki-admin-dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
 //    --tiki-admin-dropdown-link-active-bg: purple;
 
     .accordion-item {


=====================================
themes/flatly/scss/_variables.scss
=====================================
@@ -105,6 +105,8 @@ $dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg);  // default
 $dropdown-link-active-color:        $component-active-color;  // default
 $dropdown-link-active-bg:           $component-active-bg;  // default
 
+$dropdown-dark-bg:                  #4a545f; // Lightened for contrast in admin sidebar
+
 // Navs
 $nav-link-disabled-color:           var(--#{$prefix}secondary-color);  // default // $gray-600 !default;
 $nav-tabs-border-color:             $gray-200;  // default


=====================================
themes/lighty/scss/_variables.scss
=====================================
@@ -104,6 +104,8 @@ $form-feedback-invalid-color:       #D02536; // $danger !default;
 // Dropdowns
 $dropdown-link-active-bg:           $component-active-bg; //  !default;
 
+$dropdown-dark-bg: #5c636b; // Added to lighten bg to increase contrast with accordion button bg in admin sidebar
+
 // Navs
 // Navbar
 $navbar-light-color:             #6E7481;


=====================================
themes/morph/scss/_tiki-selectors.scss
=====================================
@@ -129,3 +129,5 @@ button.dropdown-toggle + .dropdown-menu  .btn.dropdown-item {
 ::v-deep(el-autocomplete) {
     height: 64px !important;
 }
+
+.tiki-admin-aside-nav-dark .nav-pills .nav-link { color: $link-color; }
\ No newline at end of file


=====================================
themes/neubrutiki/scss/_variables.scss
=====================================
@@ -162,7 +162,7 @@ $dropdown-link-color:               $dropdown-color; // var(--#{$prefix}link-col
 $dropdown-link-active-bg:           $component-active-bg; // default
 
 $dropdown-dark-color:               $gray-300; // default
-$dropdown-dark-bg:                  $gray-800; // default
+$dropdown-dark-bg:                  $gray-700; // lightened from default for better contrast vs accordion buttons in admin sidebar
 $dropdown-dark-border-color:        $dropdown-border-color; // default
 $dropdown-dark-divider-bg:          $dropdown-divider-bg; // default
 $dropdown-dark-box-shadow:          null; // default


=====================================
themes/ohia/scss/_variables.scss
=====================================
@@ -383,7 +383,7 @@ $code-bg: #f9f2f4;
 $kbd-color: #ffffff;
 $kbd-bg: #333333;
 $pre-bg: #f5f5f5;
-$pre-color: $gray-800;
+$pre-color: var(--#{$prefix}body-color); // $gray-800;
 $pre-border-color: #cccccc;
 
 // Pills


=====================================
themes/solar/scss/_variables.scss
=====================================
@@ -52,8 +52,8 @@ $table-color:                 var(--#{$prefix}body-color); // !default;
 $table-dark-color:            var(--#{$prefix}body-bg);
 
 // Forms
-$input-color:                           #073642; // Added for Element Plus
-$input-bg:                              #a9bdbd;
+$input-color:                           #a9bdbd; // #073642; // Added for Element Plus
+//$input-bg:                              #a9bdbd;
 $input-disabled-bg:                     #657b83;
 $input-group-addon-color:               #8B9C9C;
 $form-check-input-checked-color:          $component-active-color; // !default; NECESSARY
@@ -74,6 +74,8 @@ $dropdown-link-color:               var(--#{$prefix}body-color);
 $dropdown-link-hover-bg:            var(--#{$prefix}body-bg);
 $dropdown-link-active-bg:           $component-active-bg; //  !default;
 
+$dropdown-dark-bg:                  #164b58; // Lightened for better contrast vs accordion buttons in admin sidebar
+
 // Pagination
 // Cards
 // Accordion


=====================================
themes/spacelab/scss/_variables.scss
=====================================
@@ -44,6 +44,9 @@ $figure-caption-color: #757575;
 
 // Popovers
 // Navbar
+// Dropdowns
+$dropdown-dark-bg: #5e5e5e; // Added to increase contrast vs accordion buttons in admin sidebar
+
 // Code
 $code-color:                      $body-color; //   $pink !default; // Bootstrap 5.3
 


=====================================
themes/superhero/scss/_variables.scss
=====================================
@@ -85,11 +85,11 @@ $mark-bg: #806200;
 //$table-bg-scale:              0%; // !default;
 
 // Forms
-$input-bg:                          $white; // !default;
+//$input-bg:                          $white; // !default;
 $input-disabled-color:              $gray-600; // !default;
 $input-disabled-bg:                 $gray-100; // !default;
 
-$input-color:                       $gray-900; // !default;
+$input-color:                       #aaa; // $gray-200;
 $input-border-color:                transparent; // !default;
 
 $input-placeholder-color:               $gray-500; // !default;


=====================================
themes/utopias/scss/_variables.scss
=====================================
@@ -154,7 +154,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color; // default
 
 // Dropdowns
 $dropdown-dark-color:               $gray-300;  // default
-$dropdown-dark-bg:                  $gray-800;  // default
+$dropdown-dark-bg:                  $gray-700; // lightened to increase contrast with accordion buttons in admin sidebar - was $gray-800;  // default
 $dropdown-link-active-bg:           $component-active-bg; //  !default;
 
 // Pagination



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/4eea516c86518b0cd319cd84199ea40ac258cbba

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/4eea516c86518b0cd319cd84199ea40ac258cbba
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs