/* Light mode — Bootstrap default is fine, but be explicit */ .heading { font-size: 24px; font-weight: 600; border-bottom: 2px solid var(--mud-palette-divider); color: var(--mud-palette-primary); margin-bottom: 0; padding: 10px 0; } [data-theme="dark"] .heading { color: color-mix(in srgb, var(--mud-palette-primary) 60%, white); } .table { --bs-table-bg: #ffffff; --bs-table-color: #212529; --bs-table-border-color: #dee2e6; --bs-table-striped-bg: #f2f2f2; --bs-table-hover-bg: #e9ecef; } /* Dark mode — triggered by MudBlazor's dark class on */ [data-theme="dark"] .table, .dark .table { --bs-table-bg: #1e1e2e; --bs-table-color: #e0e0e0; --bs-table-border-color: #444; --bs-table-striped-bg: #2a2a3d; --bs-table-hover-bg: #333350; } [data-theme="dark"] .table thead th, .dark .table thead th { background-color: #2d2d44; color: #ffffff; border-color: #555; } /* app.css */ /*[data-theme="dark"] .mud-card-header .mud-primary-text { color: var(--mud-palette-primary-lighten) !important; }*/ /* Or if you want pure white */ [data-theme="dark"] .mud-card-header .mud-primary-text { color-mix(in srgb, var(--mud-palette-primary-lighten) 60%, white); }