admin/38686-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark mode contrast: table text, loan badges, modals, disabled inputs

Browse Source 
Override Bootstrap's --bs-table-color to use theme text color so table
numbers (days, amounts, totals) are readable on dark backgrounds. Fix
Loan badge by removing text-dark class and using CSS to force black text
on bg-warning. Add dark mode overrides for disabled form controls, select
option dropdowns, btn-close filter, btn-secondary colors, and Bootstrap
text utility classes (.text-dark, .text-primary, .text-muted, etc.).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-04-20 18:57:44 +02:00
parent 16d03421e8
commit deef851e52
2 changed files with 94 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/templates/core/payroll_dashboard.html
View File

@ -282,7 +282,7 @@
<span class="badge bg-danger ms-1" title="Has unpaid work from a completed pay period (since {{ wd.earliest_unpaid|date:'d M Y' }})">Overdue</span>
{% endif %}
{% if wd.has_loan %}
<span class="badge bg-warning text-dark ms-1" title="Has active loan or advance">Loan</span>
<span class="badge bg-warning ms-1" title="Has active loan or advance">Loan</span>
{% endif %}
</td>
<td class="align-middle">{{ wd.unpaid_count }}</td>

93
static/css/custom.css
View File

@ -652,6 +652,7 @@ a:hover {
.table {
color: var(--text-primary);
--bs-table-bg: transparent;
--bs-table-color: var(--text-primary);
}
.table > thead {
@ -1087,6 +1088,98 @@ a:hover {
.cal-entry { display: none; }
}
/* ===================================================================
DARK MODE — Bootstrap utility overrides
Bootstrap's utility classes (.text-dark, .bg-warning, .table-light,
.form-control:disabled, etc.) use hardcoded colours that look wrong
on dark backgrounds. These overrides fix contrast issues.
=================================================================== */
/* .text-dark — Bootstrap uses #212529, unreadable on dark bg */
:root .text-dark,
:root .text-dark.ms-1 {
color: var(--text-primary) !important;
}
/* Loan badge: yellow bg + white text for contrast (not text-dark) */
.badge.bg-warning {
color: #000 !important;
}
/* table-light (used in thead) — fix for dark mode */
:root .table-light {
--bs-table-bg: var(--bg-inset);
--bs-table-color: var(--text-secondary);
--bs-table-border-color: var(--border-default);
}
[data-theme="light"] .table-light {
--bs-table-bg: #f0f0f5;
--bs-table-color: #4a4a5a;
}
/* Disabled form controls — visible text in dark mode */
.form-control:disabled,
.form-select:disabled {
background-color: var(--bg-inset);
color: var(--text-secondary);
opacity: 0.7;
border-color: var(--border-default);
}
/* form-select option dropdown — ensure readable in dark mode */
.form-select option {
background-color: var(--bg-card);
color: var(--text-primary);
}
/* btn-close — visible X button on dark backgrounds */
:root .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="light"] .btn-close {
filter: none;
}
/* Bootstrap text utilities that clash with dark mode */
:root .text-primary {
color: var(--color-info) !important;
}
:root .text-success {
color: var(--color-success) !important;
}
:root .text-danger {
color: var(--color-danger) !important;
}
:root .text-warning {
color: var(--color-warning) !important;
}
:root .text-info {
color: var(--color-info) !important;
}
:root .text-muted {
color: var(--text-secondary) !important;
}
/* btn-secondary in modals — visible in dark mode */
.btn-secondary {
background-color: var(--bg-elevated);
border-color: var(--border-strong);
color: var(--text-primary);
}
.btn-secondary:hover {
background-color: var(--border-default);
border-color: var(--border-strong);
color: var(--text-primary);
}
/* ===================================================================
PRINT STYLES
=================================================================== */