body |
Page background → near-black `#121212`, base text → light grey |
#wrapper.well |
Main content card background → dark grey `#1E1E1E` (was white) |
.navbar-custom |
Top nav bar background → near-black |
.navbar-custom .navbar-brand .navbar-text |
Brand text next to logo → amber, readable on dark |
.navbar-custom .navbar-nav .nav-link |
Nav menu links → light grey |
.sectionheader |
Section titles → brand purple `#8C86FF` accent, still underlined |
.section-header-container |
Section banner boxes → dark grey `#242424` (was light grey #F6F6F6) |
h1–h6 |
All headings → near-white for contrast |
a |
Body hyperlinks → lighter purple `#8C86FF` (original `#5851DB` is too dark to read on #121212) |
.nav-tabs .nav-link, .nav-link |
Tab labels (report section tabs and the generic Maturity Model tab strip, which has no PingCastle-specific class) → lighter purple; without the plain .nav-link rule the Maturity Model tabs stay unstyled/white-on-dark |
.nav-tabs .nav-link.active, .nav-item.show .nav-link |
Active tab background → dark grey instead of white |
.nav-item.bg-light |
Maturity Model level tabs (<li class='nav-item bg-light'>) → dark background instead of Bootstrap’s .bg-light utility grey; needs !important\ because Bootstrap’s own .bg-light utility ships with !important baked in |
.card-header |
Card header bars (Maturity Model indicator groups, rule detail cards) → dark grey background, light text instead of default white/light-grey Bootstrap card header |
.card-title |
Bold card title text → near-white instead of default dark Bootstrap text |
.btn-primary |
Unchanged brand purple — already has enough contrast on dark |
.alert-info |
Info callout → dark navy background instead of light blue |
.tooltip-inner |
Hover tooltips → dark grey instead of white |
table, .table, .text |
Table text (including bootstrap-table cell class .text) → light grey instead of default dark; without .text normal table cell text stays dark-on-dark |
.table (CSS variables) |
Row/text/background colours for native Bootstrap table-striped table-bordered rule-finding tables → sets --bs-table-striped-color``--bs-table-hover-color``--bs-table-active-color, the variables Bootstrap’s .table-striped>tbody>tr:nth-of-type(odd)>* rule reads for text colour directly on each <td> (specificity beats inheriting from .table’s own color, !important or not) |
.no-records-found (+ td) |
“No matching records found” empty-state table row → light text on dark background instead of default dark-on-transparent (unreadable on dark theme) |
.card, .card-body |
Card containers around risk indicators/maturity blocks → dark background instead of default Bootstrap white; border colour also set |
.tooltip-arrow::before |
Tooltip pointer triangle → matches dark tooltip body colour instead of default (mismatched light triangle on a dark tooltip) |
.popover, .popover-header, .popover-body |
Bootstrap 5 hover/click popovers → dark background, light text, visible border instead of default white |
.fixed-table-toolbar, .fixed-table-pagination, .fixed-table-container |
bootstrap-table toolbar/pagination row background → dark, but this alone does not reach the form controls sitting inside it (see next four rows) |
.form-control.search-input |
The “Search” box above each table → dark background/border, light text, dimmed placeholder |
.btn-secondary |
“Rows per page” and export (⭳) toggle buttons → dark background instead of default white |
.dropdown-menu |
Page-size and export-format popup panels → dark background instead of default white |
.dropdown-item (+ :hover) |
Rows inside those dropdowns (10``25``50,JSON``CSV etc.) → light text, visible hover highlight instead of invisible dark-on-dark |
.page-link (+ .page-item.active .page-link) |
Pagination number buttons → dark background instead of default white; active page keeps the brand purple highlight |
.needle, .needle-center |
Gauge pointer + pivot dot — without this the needle is near-invisible (#1A172A on a #121212 background) |
.indicators-border |
Border box around each gauge → lightened so it’s visible against the dark page (default #E1E5EA is barely visible on dark) |
.model_cell (+ .model_good) |
Maturity-model grid squares for “good”/neutral indicators → given an explicit dark background; by default these two rules have no colour declarations at all and would otherwise render as a near-invisible dark square with only a black border |
.badge |
Small count/label pills → dark background instead of default white Bootstrap badge |
.bar |
Histogram bar fill (e.g. password-age charts) → recoloured to light purple #8C86FF instead of the default blue #77A9E3 |
.tick text (+ .tick line, .domain) |
Chart axis labels, tick marks, and baseline → light grey/mid-grey instead of hardcoded inline black, which was otherwise invisible on a dark background |
.sectors path[fill="#77A9E3"] |
Single-value (100%) pie charts → recoloured to the same light purple as .bar; attribute-selector targets only this exact hardcoded blue so multi-category pies (which reuse the same no-class rendering path but with a 20-colour palette) are left untouched |
.modal-content, .modal-body, .modal-footer |
Rest of every modal dialog → dark background/text/border, matching the already-purple .modal-header; without this the header is themed but the body/footer beneath it stay default Bootstrap white |
