[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UI] Fixed various color contrast issues in dark mode in several themes.

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


Commits:
8a7c454c by Gary Cunningham-Lee at 2025-08-26T17:33:39+09:00
[FIX][UI] Fixed various color contrast issues in dark mode in several themes.
---
* [FIX][UI] Fixed various color contrast issues in dark mode in several themes.

See merge request tikiwiki/tiki!8406

- - - - -


8 changed files:

- themes/brite/scss/_css-variables.scss
- themes/materia/scss/_css-variables.scss
- themes/morph/scss/_css-variables.scss
- themes/neubrutiki/scss/_css-variables.scss
- themes/neubrutiki/scss/_tiki-selectors.scss
- themes/neubrutiki/scss/_variables.scss
- themes/simplex/scss/_css-variables.scss
- themes/simplex/scss/_variables.scss


Changes:

=====================================
themes/brite/scss/_css-variables.scss
=====================================
@@ -185,4 +185,6 @@
     .blockquote-footer {
         color: #8E989F;
     }
+    --bs-border-color: #8E989F;
 }
+


=====================================
themes/materia/scss/_css-variables.scss
=====================================
@@ -177,3 +177,12 @@
         color: var(--bs-body-color) !important;
     }
 }
+
+[data-bs-theme=dark] {
+    .nav-tabs .nav-link {
+        color: #909090;
+    }
+    .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:focus {
+        color: #2196f3;
+    }
+}


=====================================
themes/morph/scss/_css-variables.scss
=====================================
@@ -111,10 +111,10 @@
 
 // Dark navbar minus top nav
 @mixin admin-nav-dark {
-    --tiki-admin-top-nav-bg: #B0C0D5;
+    --tiki-admin-top-nav-bg: #0d0e0e;
     --tiki-admin-top-nav-hover-color: #{$link-color};
     --tiki-admin-top-nav-hover-bg: #{$navbar-dark-hover-color};
-    --tiki-admin-aside-nav-bg: #B0C0D5;
+    --tiki-admin-aside-nav-bg: #0d0e0e;
     --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};
@@ -142,13 +142,13 @@
 }
 
 // Color mode preference trumps L&F admin light navbar option
-[data-bs-theme=dark] {                              // dark color mode
-    .tiki .tiki-admin-top-nav-light,
-    .tiki.tiki-admin .navbar-light-parent.tiki-top-nav-light, // UAB - Specificity increased to override
-    .tiki .tiki-admin-aside-nav-light {               // light top selectors
-        @include admin-nav-dark;                      // dark values
-    }
-}
+//[data-bs-theme=dark] {                              // dark color mode
+//    .tiki .tiki-admin-top-nav-light,
+//    .tiki.tiki-admin .navbar-light-parent.tiki-top-nav-light, // UAB - Specificity increased to override
+//    .tiki .tiki-admin-aside-nav-light {               // light top selectors
+//        @include admin-nav-dark;                      // dark values
+//    }
+//}
 // Color mode preference trumps L&F admin dark navbar option
 [data-bs-theme=light] {                              // light color mode
     .tiki .tiki-admin-top-nav-dark,


=====================================
themes/neubrutiki/scss/_css-variables.scss
=====================================
@@ -60,6 +60,7 @@
     --tiki-topbar-active-bg: transparent;
     --tiki-topbar-text-color: #{$navbar-light-hover-color};
     --tiki-topbar-border: solid #1a1a1a;
+    --tiki-topbar-border-width: 0 0.75rem 0.75rem 0.75rem;
     --tiki-topbar-box-shadow: none;
 }
 
@@ -198,7 +199,7 @@
 // - - - - - New admin pages (Unified Admin Backend) END - - - - - - - //
 
 :root {
-    --tiki-card-bg: #fff;
+//    --tiki-card-bg: #fff;
     --tiki-card-color: var(--bs-body-color);
     .sm-nav-link {
         --sm-font-family: var(--bs-body-font-family);


=====================================
themes/neubrutiki/scss/_tiki-selectors.scss
=====================================
@@ -192,9 +192,9 @@ table.table {
 //    &:hover {
 //        color: var(--tiki-card-link-hover-color);
 //    }
-    &.no-decorations {
-        box-shadow: none;
-    }
+//    &.no-decorations {
+//        box-shadow: none;
+//    }
 }
 
 .table-responsive.ts-wrapperdiv {
@@ -205,46 +205,229 @@ table.table {
     padding: 1rem;
 }
 
-.col2 .modules .card.module {
-    &:nth-child(1) .card-header { background: #cbffa8; }
-    &:nth-child(2) .card-header { background: #a8b5ff; }
-    &:nth-child(3) .card-header { background: #ffa8e1; }
-    &:nth-child(4) .card-header { background: #a8ffc6; }
-    &:nth-child(5) .card-header { background: #dca8ff; }
-    &:nth-child(6) .card-header { background: #ffb0a8; }
-    &:nth-child(7) .card-header { background: #a8f8ff; }
-    &:nth-child(8) .card-header { background: #ffe3a8; }
-}
-
-.col3 .modules .card.module {
-    &:nth-child(8) .card-header { background: #cbffa8; }
-    &:nth-child(7) .card-header { background: #a8b5ff; }
-    &:nth-child(6) .card-header { background: #ffa8e1; }
-    &:nth-child(5) .card-header { background: #a8ffc6; }
-    &:nth-child(4) .card-header { background: #dca8ff; }
-    &:nth-child(3) .card-header { background: #ffb0a8; }
-    &:nth-child(2) .card-header { background: #a8f8ff; }
-    &:nth-child(1) .card-header { background: #ffe3a8; }
-}
-
-.main-footer .bottom_modules .card.module  {
-//    div:nth-child(5) .card.module .card-header { background: #cbffa8; }
-    &:nth-child(6) .card-header { background: #a8b5ff; }
-    &:nth-child(2) .card-header { background: #ffa8e1; }
-    &:nth-child(3) .card-header { background: #a8ffc6; }
-    &:nth-child(1) .card-header { background: #dca8ff; }
-    &:nth-child(7) .card-header { background: #ffb0a8; }
-    &:nth-child(4) .card-header { background: #a8f8ff; }
-    &:nth-child(8) .card-header { background: #ffe3a8; }
-    &:nth-child(5) .card-header { background: #cbffa8; }
-}
-
-.col2 .modules .card.module .card-title,
-.col3 .modules .card.module .card-title,
-.main-footer .bottom_modules .card.module .card-title {
-    color: #000; // Not color mode responsive, because backgrounds aren't.
+[data-bs-theme=light] {
+    .col2 .modules .card.module {
+        &:nth-child(1) .card-header {
+            --tiki-card-bg: #cbffa8;
+        }
+
+        &:nth-child(2) .card-header {
+            --tiki-card-bg: #a8b5ff;
+        }
+
+        &:nth-child(3) .card-header {
+            --bs-card-cap-bg: #ffa8e1;
+        }
+
+        &:nth-child(4) .card-header {
+            background: #a8ffc6;
+        }
+
+        &:nth-child(5) .card-header {
+            background: #dca8ff;
+        }
+
+        &:nth-child(6) .card-header {
+            background: #ffb0a8;
+        }
+
+        &:nth-child(7) .card-header {
+            background: #a8f8ff;
+        }
+
+        &:nth-child(8) .card-header {
+            background: #ffe3a8;
+        }
+    }
+
+    .col3 .modules .card.module {
+        &:nth-child(1) .card-header {
+            background: #ffe3a8;
+        }
+
+        &:nth-child(2) .card-header {
+            background: #a8f8ff;
+        }
+
+        &:nth-child(3) .card-header {
+            background: #ffb0a8;
+        }
+
+        &:nth-child(4) .card-header {
+            background: #dca8ff;
+        }
+
+        &:nth-child(5) .card-header {
+            background: #a8ffc6;
+        }
+
+        &:nth-child(6) .card-header {
+            background: #ffa8e1;
+        }
+
+        &:nth-child(7) .card-header {
+            background: #a8b5ff;
+        }
+
+        &:nth-child(8) .card-header {
+            background: #cbffa8;
+        }
+    }
+
+    .main-footer .bottom_modules .card.module {
+        //    div:nth-child(5) .card.module .card-header { background: #3D4D32; }
+        &:nth-child(1) .card-header {
+            background: #dca8ff;
+        }
+
+        &:nth-child(2) .card-header {
+            background: #ffa8e1;
+        }
+
+        &:nth-child(3) .card-header {
+            background: #a8ffc6;
+        }
+
+        &:nth-child(4) .card-header {
+            background: #a8f8ff;
+        }
+
+        &:nth-child(5) .card-header {
+            background: #cbffa8;
+        }
+
+        &:nth-child(6) .card-header {
+            background: #a8b5ff;
+        }
+
+        &:nth-child(7) .card-header {
+            background: #ffb0a8;
+        }
+
+        &:nth-child(8) .card-header {
+            background: #ffe3a8;
+        }
+    }
+
+    .col2 .modules .card.module .card-title,
+    .col3 .modules .card.module .card-title,
+    .main-footer .bottom_modules .card.module .card-title {
+        color: #000; // Not color mode responsive, because backgrounds aren't.
+    }
+}
+
+[data-bs-theme=dark] {
+    .col2 .modules .card.module {
+        &:nth-child(1) .card-header {
+            --tiki-card-bg: #5B734C;
+        }
+
+        &:nth-child(2) .card-header {
+            --tiki-card-bg: #4C5173;
+        }
+
+        &:nth-child(3) .card-header {
+            --bs-card-cap-bg: #734C65;
+        }
+
+        &:nth-child(4) .card-header {
+            background: #4C7359;
+        }
+
+        &:nth-child(5) .card-header {
+            background: #382B41;
+        }
+
+        &:nth-child(6) .card-header {
+            background: #452F2D;
+        }
+
+        &:nth-child(7) .card-header {
+            background: #5F8C8F;
+        }
+
+        &:nth-child(8) .card-header {
+            background: #393326;
+        }
+    }
+
+    .col3 .modules .card.module {
+        &:nth-child(1) .card-header {
+            background: #393326;
+        }
+
+        &:nth-child(2) .card-header {
+            background: #5F8C8F;
+        }
+
+        &:nth-child(3) .card-header {
+            background: #452F2D;
+        }
+
+        &:nth-child(4) .card-header {
+            background: #382B41;
+        }
+
+        &:nth-child(5) .card-header {
+            background: #324D3B;
+        }
+
+        &:nth-child(6) .card-header {
+            background: #4D3244;
+        }
+
+        &:nth-child(7) .card-header {
+            background: #32364D;
+        }
+
+        &:nth-child(8) .card-header {
+            background: #3D4D32;
+        }
+    }
+
+    .main-footer .bottom_modules .card.module {
+        //    div:nth-child(5) .card.module .card-header { background: #3D4D32; }
+        &:nth-child(1) .card-header {
+            background: #382B41;
+        }
+
+        &:nth-child(2) .card-header {
+            background: #4D3244;
+        }
+
+        &:nth-child(3) .card-header {
+            background: #324D3B;
+        }
+
+        &:nth-child(4) .card-header {
+            background: #5F8C8F;
+        }
+
+        &:nth-child(5) .card-header {
+            background: #3D4D32;
+        }
+
+        &:nth-child(6) .card-header {
+            background: #32364D;
+        }
+
+        &:nth-child(7) .card-header {
+            background: #452F2D;
+        }
+
+        &:nth-child(8) .card-header {
+            background: #BFAA7E;
+        }
+    }
+
+    .col2 .modules .card.module .tiki-card-header-title,
+    .col3 .modules .card.module .tiki-card-header-title,
+    .main-footer .bottom_modules .card.module .tiki-card-header-title {
+        --bs-heading-color: #EBEEEF;
+    }
 }
 
+
 // Accordion
 .accordion-header .accordion-button {
     font-size: 1.8rem !important;


=====================================
themes/neubrutiki/scss/_variables.scss
=====================================
@@ -174,3 +174,7 @@ $breadcrumb-active-color:           $gray-600;  // default
 $code-color:                      $body-color; //   $pink;  // default
 
 // - - - - - - - - - -  - - - - - - Tiki SCSS variables - - - - - - - - - - - - - - - - - //
+
+:root {
+    --tiki-card-bg: var(--bs-tertiary-bg);
+}
\ No newline at end of file


=====================================
themes/simplex/scss/_css-variables.scss
=====================================
@@ -172,3 +172,4 @@
 }
 
 // - - - - - New admin pages (Unified Admin Backend) END - - - - - - - //
+


=====================================
themes/simplex/scss/_variables.scss
=====================================
@@ -23,8 +23,13 @@ $warning:       #AA6618; // $orange;  // default
     // Prefix
 $prefix: bs-; // default -- Compiling needs this to be declared
 
+// Components
+$border-color:                green; // $gray-300; // !default;
+
 // Form-validation
 $form-valid-color: #3F8406;
+$input-border-color: var(--bs-body-color);
+$input-bg: var(--bs-secondary-bg);
 
 // Body
 $body-color: $gray-800;  // default



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

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