Improve color for Dark Mode; includes Bootstrap upgrade (CFM-490) (#363)

* Improve color for Dark Mode; includes Bootstrap upgrade (CFM-490) * Update dark mode for .bg-danger (CFM-490)
COmanage · Jan 16, 2026 · 6184224 · 6184224
1 parent 8e841cc
commit 6184224
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 24 deletions.
diff --git a/app/templates/element/filter/options.php b/app/templates/element/filter/options.php
@@ -40,7 +40,7 @@ class="btn btn-default options-button dropdown-toggle"
     <?= __d('menu', 'options') ?>
   </button>
   <div class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="top-filters-options-button">
-    <h4><?= __d('menu','available.filters') ?></h4>
+    <h3><?= __d('menu','available.filters') ?></h3>
     <div id="top-filters-options">
       <?php foreach($vv_searchable_attributes as $key => $options): ?>
         <?php if($options['type'] == 'timestamp' || $options['type'] == 'boolean') continue; // skip timestamp types and put booleans at the bottom of the list ?>

diff --git a/app/webroot/css/bootstrap/bootstrap.min.css b/app/webroot/css/bootstrap/bootstrap.min.css
diff --git a/app/webroot/css/bootstrap/bootstrap.min.css.map b/app/webroot/css/bootstrap/bootstrap.min.css.map
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -776,6 +776,14 @@ ul.form-list li.alert-banner .co-alert {
   background-color: var(--cmg-color-body-bg);
   border-color: var(--cmg-color-bg-006) var(--cmg-color-bg-006) var(--cmg-color-body-bg) var(--cmg-color-bg-006);
 }
+.cm-subnav-tabs .nav-link .bg-outline-primary {
+  color: var(var(--cmg-color-link));
+  border-color: var(var(--cmg-color-link));
+}
+.cm-subnav-tabs .nav-link.active .bg-outline-primary {
+  color: var(--cmg-color-body-txt);
+  border-color: var(--cmg-color-body-txt);
+}
 .tab-count {
   display: inline-block;
   margin: -4px 0 -4px 0.5em;
@@ -971,7 +979,7 @@ ul.form-list li.alert-banner .co-alert {
 #top-filters-options-container .dropdown-menu {
   padding: 0;
 }
-#top-filters-options-container h4 {
+#top-filters-options-container h3 {
   font-size: 0.9em;
   background-color: var(--cmg-color-bg-005);
   text-align: center;
@@ -1317,6 +1325,9 @@ html.dark-mode #pagination {
 :-moz-placeholder {
   opacity: 0.2;
 }
+.form-control::placeholder {
+  color: var(--cmg-color-txt-soft);
+}
 /* PERSON CANVAS / CARDS */
 #person-actions {
   display: flex;
@@ -1615,6 +1626,9 @@ ul.form-list input[type="number"]:focus,
 ul.form-list input[type="password"]:focus {
   background-color: var(--cmg-color-highlight-002);
 }
+ul.form-list input[readonly="readonly"] {
+  color: var(--cmg-color-txt-soft);
+}
 ul.form-list select {
   width: auto; /* select boxes should fit to their content, typically */
   font-size: 0.9em;
@@ -1687,6 +1701,10 @@ ul.form-list li.info-title {
   width: 1.24em;
   height: 1.24em;
 }
+html.dark-mode .form-check-input:checked {
+  background-color: var(--cmg-color-btn-bg-001);
+  border-color: var(--cmg-color-bg-006);
+}
 .checkbox .subfield {
   margin-left: 1.5em;
 }
@@ -1778,11 +1796,14 @@ ul.form-list input.datepicker {
 .field-info .input-group .input.text {
   width: inherit;
 }
-.field-info .input-group .input-group-text{
+.field-info .input-group .input-group-text {
   border-radius: unset;
   font-size: inherit;
   line-height: inherit;
   padding: .25rem .75rem;
+  background-color: var(--cmg-color-bg-002);
+  color: var(--cmg-color-body-txt);
+  border-color: var(--cmg-color-bg-007);
 }
 .cm-time-picker {
   position: relative;
@@ -2113,6 +2134,7 @@ body.start .submit {
   padding: 0.5rem 1rem;
   background-color: var(--cmg-color-bg-004);
   border-bottom: none;
+  justify-content: space-between;
 }
 .cm-modal .modal-content {
   height: 80vh;
@@ -2426,9 +2448,11 @@ th, td {
   text-align: left;
 }
 th {
+  color: var(--cmg-color-body-txt);
   background-color: var(--cmg-color-bg-003);
 }
 thead td.actions {
+  color: var(--cmg-color-body-txt);
   background-color: var(--cmg-color-bg-003);
 }
 td {
@@ -2685,7 +2709,7 @@ html.dark-mode .btn-default:active {
 }
 .bg-danger {
   color: var(--cmg-color-txt-inverse);
-  background-color: var(--cmg-color-highlight-014);
+  background-color: var(--cmg-color-highlight-014) !important;
 }
 .bg-warning {
   background-color: var(--cmg-color-highlight-009) !important;
@@ -2702,7 +2726,7 @@ html.dark-mode .btn-default:active {
 }
 /* Bootstrap bg-outline */
 .bg-outline-primary {
-  color: var(--cmg-color-btn-bg-001);
+  color: var(--cmg-color-link);
   border: 1px solid var(--cmg-color-btn-bg-001);
 }
 .bg-outline-info {
@@ -2731,6 +2755,7 @@ html.dark-mode .btn-default:active {
 }
 /* Other Bootstrapisms */
 .accordion-item {
+  color: var(--cmg-color-body-txt);
   background-color: var(--cmg-color-body-bg);
   border-color: var(--cmg-color-bg-006);
 }
@@ -2741,6 +2766,10 @@ html.dark-mode .btn-default:active {
 .accordion-button:not(.collapsed) {
   color: var(--cmg-color-link);
   background-color: var(--cmg-color-bg-001);
+  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--cmg-color-bg-006);
+}
+html.dark-mode .accordion-button::after { /* override Bootstrap SVG in dark mode */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(99, 146, 197)' viewBox='0 0 16 16'%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");
 }
 .dropdown-menu, .dropdown-item {
   color: var(--cmg-color-body-txt);

diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
@@ -134,7 +134,7 @@ html.dark-mode {
   --cmg-color-btn-bg-002: #333;      /* primary button hover color (black) */
   --cmg-color-btn-bg-003: #eee;      /* common background color (gray) */
   --cmg-color-btn-bg-004: #c33;      /* button (red) */
-  --cmg-color-btn-bg-005: #17730d;   /* button (green) */
+  --cmg-color-btn-bg-005: #155e0d;   /* button (green) */
 
   /* General Background and Border Colors (Grayscale) */
   --cmg-color-bg-001: #121212; /* background color */
@@ -148,30 +148,39 @@ html.dark-mode {
   --cmg-color-bg-009: #222;    /* data-list background color */
 
   /* Highlights: Alerts, Notices, and Badges */
-  --cmg-color-highlight-001: #bc6262; /* forms: required and error icons (red) */
+  --cmg-color-highlight-001: #cd6262; /* forms: required and error icons (red) */
   --cmg-color-highlight-002: #242400; /* forms: focused input (yellow) */
 
-  --cmg-color-highlight-003: #0B3556; /* alert: info text color (blue) */
+  --cmg-color-highlight-003: #96969b; /* alert: info text color (blue) */
   --cmg-color-highlight-004: #22222a; /* search bar active (blue) */
   --cmg-color-highlight-005: #ccc;    /* badge light (light gray) */
 
   --cmg-color-highlight-006: #97BF97; /* alert: success (green) */
   --cmg-color-highlight-007: #0f5132; /* alert: success text color, badge outline (green) */
   --cmg-color-highlight-008: #0f5132; /* alert: success border color (green) */
 
-  --cmg-color-highlight-009: #fffeb4; /* alert: warning (yellow) */
-  --cmg-color-highlight-010: #41412e; /* alert: warning text color (yellow) */
-  --cmg-color-highlight-011: #f6f5ae; /* alert: warning border color (yellow) */
+  --cmg-color-highlight-009: #353527; /* alert: warning (yellow) */
+  --cmg-color-highlight-010: #a0a092; /* alert: warning text color (yellow) */
+  --cmg-color-highlight-011: #383829; /* alert: warning border color (yellow) */
 
-  --cmg-color-highlight-012: #ffd4d4; /* alert: danger (red) */
+  --cmg-color-highlight-012: #d9b4b4; /* alert: danger (red) */
   --cmg-color-highlight-013: #e33;    /* title for deleted/archived (red) */
-  --cmg-color-highlight-014: #dc3545; /* danger badge (red) */
+  --cmg-color-highlight-014: #900; /* danger badge (red) */
   --cmg-color-highlight-015: #842029; /* alert: danger text color (red) */
-  --cmg-color-highlight-016: #f8cece; /* alert: danger border color (red) */
+  --cmg-color-highlight-016: #d9b4b4; /* alert: danger border color (red) */
 
-  --cmg-color-highlight-017: #cee6f8; /* alert: info border color (blue) */
+  --cmg-color-highlight-017: #333; /* alert: info border color (blue) */
   --cmg-color-highlight-018: #cc0;    /* autocomplete highlight for query text */
 
   /* Bootstrap Overrides for Dark Mode */
   --bs-light-rgb: #151515;
 }
+
+/* Bootstrap checkbox overrides require more specificity */
+html .form-check-input {
+  --bs-border-color: #bbb;
+}
+html.dark-mode .form-check-input {
+  --bs-form-check-bg: #121212;
+  --bs-border-color: #555;
+}
diff --git a/app/webroot/js/bootstrap/bootstrap.bundle.min.js b/app/webroot/js/bootstrap/bootstrap.bundle.min.js
diff --git a/app/webroot/js/bootstrap/bootstrap.bundle.min.js.map b/app/webroot/js/bootstrap/bootstrap.bundle.min.js.map