[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UI] Fix pagetop and other color contrast issues in several themes.

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


Commits:
a905ff79 by Gary Cunningham-Lee at 2025-12-09T23:55:38+09:00
[FIX][UI] Fix pagetop and other color contrast issues in several themes.
---
* [FIX][UI] Fix pagetop and other color contrast issues in several themes.

See merge request tikiwiki/tiki!9205

- - - - -


14 changed files:

- themes/amelia/scss/_css-variables.scss
- themes/boosted/scss/_css-variables.scss
- themes/brite/scss/_css-variables.scss
- themes/feb12/scss/_css-variables.scss
- themes/fivealive-lite/options/kiwi/scss/_variables.scss
- themes/fivealive-lite/scss/_css-variables.scss
- themes/greenvalley/scss/_css-variables.scss
- themes/journal/scss/_css-variables.scss
- themes/litera/scss/_css-variables.scss
- themes/lux/scss/_css-variables.scss
- themes/morph/scss/_css-variables.scss
- themes/quartz/scss/_css-variables.scss
- themes/sandstone/scss/_css-variables.scss
- themes/superhero/scss/_css-variables.scss


Changes:

=====================================
themes/amelia/scss/_css-variables.scss
=====================================
@@ -73,6 +73,8 @@
 [data-bs-theme=dark] {                              // color mode
     .tiki-top-nav-light {                           // light top selector
         @include top-nav-dark;                      // dark values
+        --tiki-site-title-color: #{$navbar-dark-color};
+        --tiki-site-subtitle-color: #{$navbar-dark-color};
     }
     .tiki-topbar-nav-light {
         @include topbar-nav-dark;


=====================================
themes/boosted/scss/_css-variables.scss
=====================================
@@ -35,7 +35,7 @@
 
 @mixin top-nav-light {
     --tiki-top-bg: #fff;
-    --tiki-top-color: var(--tiki-top-color);
+    --tiki-top-color: #000;
     --tiki-top-hover-color: #000;
     --tiki-top-active-color: #000;
 //    --tiki-top-hover-bg:;
@@ -43,8 +43,8 @@
     --tiki-top-text-color: #000;
     --tiki-top-order: solid #000;
     --tiki-top-box-shadow: 0px 1px 10px #e3e1e1;
-    --tiki-site-title-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
-    --tiki-site-subtitle-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
+    --tiki-site-title-color: var(--tiki-top-color); // #{$navbar-light-brand-color, var(--tiki-top-color)};
+    --tiki-site-subtitle-color: var(--tiki-top-color); // #{$navbar-light-brand-color, var(--tiki-top-color)};
 }
 
 @mixin topbar-nav-light {


=====================================
themes/brite/scss/_css-variables.scss
=====================================
@@ -23,8 +23,8 @@
     --tiki-top-color: #{$navbar-light-color};
     --tiki-top-hover-color: #{$navbar-light-hover-color};
     --tiki-top-text-color: #{$navbar-light-hover-color};
-    --tiki-site-title-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
-    --tiki-site-subtitle-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
+    --tiki-site-title-color: var(--tiki-top-color); // #{$navbar-light-brand-color, var(--tiki-top-color)}; This background color is too light for the brand color to have good contrast with it.
+    --tiki-site-subtitle-color: var(--tiki-top-color); // #{$navbar-light-brand-color, var(--tiki-top-color)};
     --tiki-top-border: solid #{$black};
     --tiki-top-border-width: 0px 0px 2px 0px;
     --tiki-top-box-shadow: 0px 1px 10px #34292c;


=====================================
themes/feb12/scss/_css-variables.scss
=====================================
@@ -38,8 +38,8 @@
     --tiki-top-color: #{$navbar-light-color};
     --tiki-top-hover-color: #{$navbar-light-hover-color};
     --tiki-top-text-color: #{$navbar-light-hover-color};
-    --tiki-site-title-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
-    --tiki-site-subtitle-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
+    --tiki-site-title-color: var(--tiki-top-color); // #{$navbar-light-brand-color, var(--tiki-top-color)};
+    --tiki-site-subtitle-color: var(--tiki-top-color); // #{$navbar-light-brand-color, var(--tiki-top-color)};
     --tiki-top-border: none;
     --tiki-top-box-shadow: 0px 1px 10px #393939;
 }
@@ -71,6 +71,8 @@
 [data-bs-theme=dark] {                              // color mode
     .tiki-top-nav-light {                           // light top selector
         @include top-nav-dark;                      // dark values
+        --tiki-site-title-color: #{$navbar-dark-color};
+        --tiki-site-subtitle-color: #{$navbar-dark-color};
     }
     .tiki-topbar-nav-light {
         @include topbar-nav-dark;


=====================================
themes/fivealive-lite/options/kiwi/scss/_variables.scss
=====================================
@@ -105,10 +105,10 @@ $tiki-tabs-link-active-color: #fff;
 $tiki-nav-tabs-link-active-bg: #638637;
 
 // Navbar
-$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .65);
-$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8);
+$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .8);
+$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .85);
 $navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1);
-$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3);
+$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .5);
 $navbar-light-icon-color:           rgba($body-color, .75);
 $navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
 $navbar-light-toggler-border-color: rgba($black, .1);//rgba(var(--#{$prefix}emphasis-color-rgb), .15); <-- why was this change made?
@@ -165,7 +165,7 @@ $tiki-dark-footer-link-hover-color: #82a653;
 // Background images (actual images or CSS gradients, etc.), if assigned, override background colors.
 
 @mixin top-nav-light {
-    --tiki-top-bg: #{$light}; //#117485 !important;
+    --tiki-top-bg: var(--tiki-fivealive-lite-theme-alt-bg);
     --tiki-top-color: #{$navbar-light-color}; // #{$tiki-top-link-color};
     --tiki-site-title-color: #{$navbar-light-brand-color};
     --tiki-site-subtitle-color: #{$navbar-light-brand-color};
@@ -257,15 +257,15 @@ $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-alt-bg); // #96a032;
+    --tiki-admin-top-nav-bg: var(--tiki-fivealive-lite-theme-bg); // #96a032;
     --tiki-admin-top-nav-color: #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-alt-bg); // #96a032;
+    --tiki-admin-aside-nav-bg: var(--tiki-fivealive-lite-theme-bg); // #96a032;
     --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: #f9f9f9;// #{$tiki-top-light-color};
-    --tiki-admin-dropdown-bg: #a59705;
+    --tiki-admin-dropdown-bg: #7A7105; // #a59705;
     --tiki-admin-dropdown-link-hover-color: #{$dropdown-link-hover-color};
     --tiki-admin-dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
 }
@@ -305,5 +305,9 @@ $tiki-dark-footer-link-hover-color: #82a653;
 .accordion {
     --bs-accordion-active-bg: #{$dark};
     --bs-accordion-active-color: #fff;
-    --bs-accordion-btn-bg: #{$primary}; // no $bg-light
+    --bs-accordion-btn-bg: #6D6609; // #{$primary}; // no $bg-light
 }
+
+[data-bs-theme=dark] {
+
+}
\ No newline at end of file


=====================================
themes/fivealive-lite/scss/_css-variables.scss
=====================================
@@ -79,15 +79,17 @@ header.navbar.fixed-top {
 }
 
 // Color mode preference trumps L&F admin light navbar option
-//[data-bs-theme=dark] {                              // color mode
-//    .tiki-top-nav-light {                           // light top selector
-//        @include top-nav-dark;                      // dark values
-//    }
-//    .tiki-topbar-nav-light {
-//        @include topbar-nav-dark;
-//    }
-//}
-//
+[data-bs-theme=dark] {                              // color mode
+    .tiki-top-nav-light {                           // light top selector
+        @include top-nav-dark;                      // dark values
+        --tiki-site-title-color: #1F1F1F;
+        --tiki-site-subtitle-color: #1F1F1F;
+    }
+    .tiki-topbar-nav-light {
+        @include topbar-nav-dark;
+    }
+}
+
 // Color mode preference trumps L&F admin dark navbar option
 //[data-bs-theme=light] {                              // color mode
 //    .tiki-top-nav-dark {                           // dark top selector


=====================================
themes/greenvalley/scss/_css-variables.scss
=====================================
@@ -22,8 +22,8 @@ $imagePath: "../images/";
     --tiki-top-color: #{$navbar-dark-color};
     --tiki-top-hover-color: #{$navbar-dark-hover-color};
     --tiki-top-text-color: #{$navbar-dark-hover-color};
-    --tiki-site-title-color: #{$navbar-dark-brand-color, var(--tiki-top-color)};
-    --tiki-site-subtitle-color: #{$navbar-dark-brand-color, var(--tiki-top-color)};
+    --tiki-site-title-color: var(--tiki-top-color); // #{$navbar-dark-brand-color, var(--tiki-top-color)};
+    --tiki-site-subtitle-color: var(--tiki-top-color); // #{$navbar-dark-brand-color, var(--tiki-top-color)};
     --tiki-top-border: none;
     --tiki-top-box-shadow: 0px 1px 10px #393939;
 }


=====================================
themes/journal/scss/_css-variables.scss
=====================================
@@ -74,6 +74,8 @@
 [data-bs-theme=dark] {                              // color mode
     .tiki-top-nav-light {                           // light top selector
         @include top-nav-dark;                      // dark values
+        --tiki-site-title-color: #{$navbar-dark-color};
+        --tiki-site-subtitle-color: #{$navbar-dark-color};
     }
     .tiki-topbar-nav-light {
         @include topbar-nav-dark;


=====================================
themes/litera/scss/_css-variables.scss
=====================================
@@ -72,6 +72,8 @@
 [data-bs-theme=dark] {                              // color mode
     .tiki-top-nav-light {                           // light top selector
         @include top-nav-dark;                      // dark values
+        --tiki-site-title-color: #{$navbar-dark-color};
+        --tiki-site-subtitle-color: #{$navbar-dark-color};
     }
     .tiki-topbar-nav-light {
         @include topbar-nav-dark;


=====================================
themes/lux/scss/_css-variables.scss
=====================================
@@ -71,6 +71,8 @@
 [data-bs-theme=dark] {                              // color mode
     .tiki-top-nav-light {                           // light top selector
         @include top-nav-dark;                      // dark values
+        --tiki-site-title-color: #{$navbar-dark-color};
+        --tiki-site-subtitle-color: #{$navbar-dark-color};
     }
     .tiki-topbar-nav-light {
         @include topbar-nav-dark;


=====================================
themes/morph/scss/_css-variables.scss
=====================================
@@ -72,6 +72,8 @@
 [data-bs-theme=dark] {                              // color mode
     .tiki-top-nav-light {                           // light top selector
         @include top-nav-dark;                      // dark values
+        --tiki-site-title-color: #{$navbar-dark-color};
+        --tiki-site-subtitle-color: #{$navbar-dark-color};
     }
     .tiki-topbar-nav-light {
         @include topbar-nav-dark;


=====================================
themes/quartz/scss/_css-variables.scss
=====================================
@@ -74,6 +74,8 @@
 [data-bs-theme=dark] {                              // color mode
     .tiki-top-nav-light {                           // light top selector
         @include top-nav-dark;                      // dark values
+        --tiki-site-title-color: #{$navbar-dark-color};
+        --tiki-site-subtitle-color: #{$navbar-dark-color};
     }
     .tiki-topbar-nav-light {
         @include topbar-nav-dark;


=====================================
themes/sandstone/scss/_css-variables.scss
=====================================
@@ -74,12 +74,18 @@
 [data-bs-theme=dark] {                              // color mode
     .tiki-top-nav-light {                           // light top selector
         @include top-nav-dark;                      // dark values
+        --tiki-site-title-color: #{$navbar-dark-color};
+        --tiki-site-subtitle-color: #{$navbar-dark-color};
     }
+
+
     .tiki-topbar-nav-light {
         @include topbar-nav-dark;
     }
 }
 
+
+
 // Color mode preference trumps L&F admin dark navbar option
 [data-bs-theme=light] {                              // color mode
     .tiki-top-nav-dark {                           // dark top selector


=====================================
themes/superhero/scss/_css-variables.scss
=====================================
@@ -41,8 +41,8 @@
     --tiki-top-color: #{$navbar-light-color};
     --tiki-top-hover-color: #{$navbar-light-hover-color};
     --tiki-top-text-color: #{$navbar-light-hover-color};
-    --tiki-site-title-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
-    --tiki-site-subtitle-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
+    --tiki-site-title-color: var(--tiki-top-color); // #{$navbar-light-brand-color, var(--tiki-top-color)}; // $navbar-light-brand-color was too light for this background color
+    --tiki-site-subtitle-color: var(--tiki-top-color); // #{$navbar-light-brand-color, var(--tiki-top-color)};
     --tiki-top-border: solid #333;
     --tiki-top-border-width: 0px 0px 1px 0px;
     --tiki-top-box-shadow: 0px 1px 10px #de6919;



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

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/a905ff793d84040dfa56ba8a2b7a5616820e9a89
You're receiving this email because of your account on gitlab.com.

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