[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UI] Improve color contrast and readability by 1) adjusting colors in...

Gary Cunningham-Lee pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
f37894c5 by Gary Cunningham-Lee at 2026-03-05T22:52:20+09:00
[FIX][UI] Improve color contrast and readability by 1) adjusting colors in...
---
* [FIX][UI] Improve color contrast and readability by 1) adjusting colors in some dark themes, and 2) adding the alert-link class to links in alerts. Todo: code edit isn't effective in some cases so another approach is needed.

See merge request tikiwiki/tiki!9697

- - - - -


10 changed files:

- lib/core/Tiki/Suggestion/Helpers/Community.php
- lib/core/Tiki/Suggestion/Performance/Informations.php
- templates/admin/admin_suggestion.tpl
- themes/cyborg/scss/_variables.scss
- themes/ohia/scss/_css-variables.scss
- themes/ohia/scss/_variables.scss
- themes/slate/css/slate.scss
- themes/slate/scss/_variables.scss
- themes/vapor/scss/_css-variables.scss
- themes/vapor/scss/_variables.scss


Changes:

=====================================
lib/core/Tiki/Suggestion/Helpers/Community.php
=====================================
@@ -13,7 +13,7 @@ class Community implements SuggestionRules
     public function parser()
     {
         $message = tra('Participate in the Tiki community:');
-        $message .= ' <a target="_blank" title="' . tra('Tiki Community') . '" href="https://tiki.org/Community">https://tiki.org/Community</a>';
+        $message .= ' <a class="alert-link" target="_blank" title="' . tra('Tiki Community') . '" href="https://tiki.org/Community">https://tiki.org/Community</a>';
 
         return $message;
     }


=====================================
lib/core/Tiki/Suggestion/Performance/Informations.php
=====================================
@@ -13,7 +13,7 @@ class Informations implements SuggestionRules
     public function parser()
     {
         $message = tra('Performance issues? Take advantage of the performance challenge:');
-        $message .= ' <a target="_blank" title="' . tra('Performance') . '" href="https://tiki.org/Performance-challenge">https://tiki.org/Performance-challenge</a>';
+        $message .= ' <a class="alert-link" target="_blank" title="' . tra('Performance') . '" href="https://tiki.org/Performance-challenge">https://tiki.org/Performance-challenge</a>';
 
         return $message;
     }


=====================================
templates/admin/admin_suggestion.tpl
=====================================
@@ -6,7 +6,7 @@
         </h4>
         <p>{tr}Do you need help with your Tiki?{/tr}<br/>
                 {tr}You can reach out to a specialist:{/tr}
-                <a target="_blank" title="{tr}Tiki Consultants{/tr}" href="https://tiki.org/Consultants">https://tiki.org/Consultants</a>
+                <a target="_blank" class="alert-link" title="{tr}Tiki Consultants{/tr}" href="https://tiki.org/Consultants">https://tiki.org/Consultants</a>
         </p>
     </div>
 {/if}


=====================================
themes/cyborg/scss/_variables.scss
=====================================
@@ -8,6 +8,7 @@
 //
 // Color system
 
+$blue:      #2DA1D7; // Lightened slightly for contrast against bg-light.
 $red:     #EB0000; // #F00000; //#c00;  default
 
 $primary:       #207CA7; // $blue;  // default
@@ -16,7 +17,7 @@ $success:       #558000; //#639400; // #558000; // $green !default;
 $info:          $cyan;  // default
 $warning:       #B35F00; // $yellow !default;
 $danger:        $red;  // default
-$light: #737373; //  $gray-800 !default; Darkened for increased contrast with link color
+$light:         #303030; // #737373; //  $gray-800 !default; Darkened for increased contrast with body color
 $dark: #000000;  // default
 
 $green-300: tint-color($green, 40%);  // default -- Compiling needs this to be declared


=====================================
themes/ohia/scss/_css-variables.scss
=====================================
@@ -34,7 +34,7 @@
 }
 
 @mixin top-nav-light {
-    --tiki-top-bg: #{$sky-light};
+    --tiki-top-bg: #{$sky-new};
     --tiki-top-color: #{$navbar-light-color};
     --tiki-top-hover-color: #{$navbar-light-hover-color};
     --tiki-top-text-color: #{$navbar-light-hover-color};
@@ -45,7 +45,7 @@
 }
 
 @mixin topbar-nav-light {
-    --tiki-topbar-bg: #{$sky-light};
+    --tiki-topbar-bg: #{$sky-new};
     --tiki-topbar-color: #{$navbar-light-color};
     --tiki-topbar-hover-color: #{$navbar-dark-hover-color};
     --tiki-topbar-text-color: #{$navbar-dark-hover-color};
@@ -71,12 +71,12 @@
 
 // Light navbar minus top nav
 @mixin admin-nav-light {
-    --tiki-admin-top-nav-bg: #{$sky-light};
-    --tiki-admin-navbar-bg: #{$sky-light};
-     --tiki-admin-top-nav-color: #{$navbar-light-color};
-    --tiki-admin-top-nav-hover-color: #{$navbar-light-hover-color};
+    --tiki-admin-top-nav-bg: #{$sky-new};
+    --tiki-admin-navbar-bg: #{$sky-new};
+     --tiki-admin-top-nav-color: #{$navbar-dark-color};
+    --tiki-admin-top-nav-hover-color: #{$navbar-dark-hover-color};
     --tiki-admin-top-nav-hover-bg: none ;
-    --tiki-admin-aside-nav-bg: #{$sky-light};
+    --tiki-admin-aside-nav-bg: #{$sky-new};
     --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};


=====================================
themes/ohia/scss/_variables.scss
=====================================
@@ -4,6 +4,7 @@
 // The color palette for this theme is derived from the ohia lehua tree and its enviorment in Hawaii.
 // These are just physical attributes and  no reference is implied regarding the cultural aspects of the tree.
 $sky-light: #398ad8; //#4C95D6;
+$sky-new: #194E80;
 $sky-deep: #005EA6;
 $cloud: #b9bcc0;
 $wood: #987255;
@@ -85,7 +86,7 @@ $success:       $sky-deep; // #aad4ab;
 $info:          $sky-light; // #aad0e2;
 $warning:       $blossom-yellow; // #deceb3;
 $danger:        $blossom-red; // #dda8a7;
-$light:         #acafb2; // $cloud; //$gray-100;
+$light:         $sky-new; // #acafb2; // $cloud; //$gray-100;
 $dark:          $cooled-lava-dark; //#000;
 
 $theme-colors: (
@@ -95,7 +96,7 @@ $theme-colors: (
     "info":              $sky-light,
     "warning":           $blossom-yellow,
     "danger":            $blossom-red,
-    "light":             $sky-light,
+    "light":             $sky-new,
     "dark":              $cooled-lava-dark
 );
 
@@ -245,7 +246,7 @@ $nav-tabs-link-active-bg:           var(--#{$prefix}body-bg);
 $nav-tabs-link-active-border-color: $wood $wood $nav-tabs-link-active-bg;
 
 // Navbar
-$navbar-dark-color:                 rgba($white, .55);  // default
+$navbar-dark-color:                 rgba($white, .64);  // default
 $navbar-dark-hover-color:           rgba($white, .75);  // default
 $navbar-dark-active-color:          $white;  // default
 $navbar-dark-disabled-color:        rgba($white, .25);  // default
@@ -253,7 +254,7 @@ $navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://w
 $navbar-dark-toggler-border-color:  rgba($white, .1);  // default
 
 // Navbar links
-$navbar-light-color: #000; // #fd0006;
+$navbar-light-color: #BDBDBD; // #fd0006;
 $navbar-light-hover-color: #333333;
 $navbar-light-hover-bg:transparent;
 $navbar-light-active-color: #141414;


=====================================
themes/slate/css/slate.scss
=====================================
@@ -89,11 +89,6 @@ body.fullscreen { background: var(--#{$prefix}body-bg); }
     padding-bottom: 0;
 }
 
-// Variable not being respected
-.navbar-light .nav-link {
-    color: rgba(0, 0, 0, 0.55);
-}
-
 .alert-primary {
     --bs-alert-color: #fff;
     --bs-alert-bg: #757575;


=====================================
themes/slate/scss/_variables.scss
=====================================
@@ -15,7 +15,7 @@ $success:       #328532; // $green;  // default
 $info:          #20809D; // $cyan;  // default
 $warning:       #AB6503; // $yellow;  // default
 $danger:        #E6251E; // $red;  // default
-$light:         rgb(233, 236, 239); // #757575; // $gray-500; // $gray-200;  // default Darkened for WCAG compliance with #fff foreground cp;pr
+$light:         #354050; // rgb(233, 236, 239); // #757575; // $gray-500; // $gray-200;  // default Darkened for WCAG compliance with #aaa body color.
 //$dark:          $gray-900;  // default
 
 // Options


=====================================
themes/vapor/scss/_css-variables.scss
=====================================
@@ -21,19 +21,19 @@
 //    --bs-navbar-hover-color: #2aad9d;
 //    --bs-navbar-active-color: #2aad9d;
 //}
-:root {
-    --bs-light-rgb: 68, 217, 232;
-    .bg-light {
-        --bs-bg-opacity: 1;
-        background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
-    }
-}
+//:root {
+//    --bs-light-rgb: 68, 217, 232;
+//    .bg-light {
+//        --bs-bg-opacity: 1;
+//        background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
+//    }
+//}
 
 @mixin top-nav-dark {
     --tiki-top-bg: #{$primary};
-    --tiki-top-color: rgba(255, 255, 255, 0.55);
-    --tiki-top-hover-color: rgba(255, 255, 255, 0.75);
-    --tiki-top-text-color: rgba(255, 255, 255, 0.75);
+    --tiki-top-color: rgba(255, 255, 255, 0.80);
+    --tiki-top-hover-color: rgba(255, 255, 255, 0.85);
+    --tiki-top-text-color: rgba(255, 255, 255, 0.80);
     --tiki-top-box-shadow: 0 0 2px rgba(111, 66, 193, 0.9), 0 0 4px rgba(111, 66, 193, 0.4), 0 0 1rem rgba(111, 66, 193, 0.3), 0 0 4rem rgba(111, 66, 193, 0.1);
     --bs-navbar-brand-color: #{$navbar-dark-brand-color};
     --bs-navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
@@ -41,9 +41,9 @@
 
 @mixin topbar-nav-dark {
     --tiki-topbar-bg: #{$dark}; // rgb(111, 66, 193);
-    --tiki-topbar-color: rgba(255, 255, 255, 0.55);
-    --tiki-topbar-hover-color: rgba(255, 255, 255, 0.75);
-    --tiki-topbar-text-color: rgba(255, 255, 255, 0.75);
+    --tiki-topbar-color: rgba(255, 255, 255, 0.80);
+    --tiki-topbar-hover-color: rgba(255, 255, 255, 0.85);
+    --tiki-topbar-text-color: rgba(255, 255, 255, 0.80);
     --tiki-topbar-box-shadow: 0 0 2px rgba(111, 66, 193, 0.9), 0 0 4px rgba(111, 66, 193, 0.4), 0 0 1rem rgba(111, 66, 193, 0.3), 0 0 4rem rgba(111, 66, 193, 0.1);
 }
 
@@ -206,4 +206,6 @@ body {
     --tiki-input-select-color: var(--tiki-input-color);
     --tiki-input-select-bg: var(--tiki-input-bg);
     --bs-border-width: 1px;
+    --bs-light-bg-subtle: $light;
+    --bs-info-bg-subtle: #065e94; // ($info)
 }


=====================================
themes/vapor/scss/_variables.scss
=====================================
@@ -14,10 +14,10 @@ $yellow-800: shade-color($yellow, 60%) !default;
 $primary:       $purple; // !default;
 $secondary:     #D917A2; // $pink !default;
 $success:       #068938; // $green !default;
-$info:         #0879BF; // $blue !default;
+$info:          #0879BF; // $blue !default;
 $warning:       #946F00; // $yellow !default;
 $danger:        #E02E3A; // $red !default;
-$light:         #0F6D75; // #11828D; // #44d9e8 !default; Darkened for acceptable contrast behind link color
+$light:         #754AC4; // #0F6D75; // #11828D; // #44d9e8 !default; Darkened for acceptable contrast behind link color
 $dark:          $gray-900; // !default;
 
 //$min-contrast-ratio:   1.2 !default;
@@ -25,6 +25,7 @@ $dark:          $gray-900; // !default;
 // Options
     // Prefix
 $prefix: bs-; // default -- Compiling needs this to be declared
+$enable-dark-mode: false;
 
 // $enable-rounded:              false !default;
 
@@ -54,18 +55,18 @@ $mark-bg:                     $yellow-800;
 $input-bg: #30115e;  // Copied from Bootswatch demo page.
 
 // Navs
-$nav-link-color:                    #000; // var(--#{$prefix}link-color) !default;
-$nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
+$nav-link-color:                    var(--#{$prefix}link-color); // !default;
+$nav-link-hover-color:              var(--#{$prefix}link-hover-color); // default;
 
 // Navbar
-$navbar-light-color:                #000;
-$navbar-light-hover-color:          $gray-800;
-$navbar-light-active-color:         $gray-900;
-$navbar-light-disabled-color:       $gray-700;
-//$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .95); // !default;
-//$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8); // !default;
-//$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1); // !default;
-//$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3); // !default;
+//$navbar-light-color:                #000;
+//$navbar-light-hover-color:          $gray-800;
+//$navbar-light-active-color:         $gray-900;
+//$navbar-light-disabled-color:       $gray-700;
+$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .95); // !default;
+$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8); // !default;
+$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1); // !default;
+$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3); // !default;
 $navbar-light-brand-color:          $navbar-light-active-color; // !default;
 $navbar-light-brand-hover-color:    $navbar-light-active-color; // !default;
 
@@ -83,7 +84,7 @@ $tooltip-bg:                        $dark !default;
 // List group
 // Breadcrumbs
 // Code
-$code-color:                        $pink;
+$code-color:                        #FAD6F1; //$pink;
 
 //--------------------------- Tiki SCSS variables
 



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

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/f37894c568ef64b6dde3cb17b1b3804bf0de0067
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