Skip to content

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

Merged
merged 2 commits into from
Jan 16, 2026
+61 −24
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6d8d591
Improve color for Dark Mode; includes Bootstrap upgrade (CFM-490)
arlen Jan 14, 2026
a9936da
Update dark mode for .bg-danger (CFM-490)
arlen Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/templates/element/filter/options.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ?>
Expand Down
7 changes: 3 additions & 4 deletions app/webroot/css/bootstrap/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/webroot/css/bootstrap/bootstrap.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

37 changes: 33 additions & 4 deletions app/webroot/css/co-base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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);
Expand Down
29 changes: 19 additions & 10 deletions app/webroot/css/co-color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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;
}
6 changes: 3 additions & 3 deletions app/webroot/js/bootstrap/bootstrap.bundle.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/webroot/js/bootstrap/bootstrap.bundle.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.