P11 Common (Bootstrap) CSS color variables
This page contains a list of the most important CSS color variables with their resolved, concrete values based on the **standard Bootstrap styling**. This collection serves as an optimized template for creating and managing custom designs. Using this compact set, developers can efficiently define their own mono color schemes and mono styles without having to go through the complete, extensive list of Bootstrap variables.
To see how these variables can be used to create and apply themes dynamically at runtime, including practical demo examples, please refer to our P11 Theming & Styling page.
Quick and Efficient Theme Customization
This page offers a condensed list of essential CSS variables, serving as an optimized template for creating custom themes. Instead of navigating the entire, extensive list of Bootstrap variables, this overview focuses on the key variables and their resolved, final values.
The provided lists for both Light and Dark Mode contain only the concrete color and style values, with direct assignments like --bs-accordion-color: var(--bs-body-color); removed and replaced by their final values. This significantly simplifies the process, allowing you to focus directly on the relevant values that define the look and feel of your application.
You can use these lists as a starting point to build your own theme. Simply copy the code blocks, adjust the values, and save the result as your own CSS file. You can then dynamically load this theme at runtime using the P11 ThemeService, for example, with ThemeService.SetThemeFromCssFileAsync("wwwroot/assets/my-custom-theme.css");.
To revert to the default styles and remove the custom theme, simply use ThemeService.ClearCurrentTheme();.
Set Bootstrap color or mono
For detailed API parameters and live examples of the **Monochrome mode**, jump to the dedicated page:
Go to Monochrome mode Documentation
Implementation Details
:root {
/* === BOOTSTRAP COLORS (Default) === */
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
/* RGB versions (for rgba() and color-mix) */
--bs-primary-rgb: 13, 110, 253;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
/* Text emphasis colors (darker variants for contrast on light backgrounds) */
--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #664d03;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
/* Subtle background tints (very light versions of theme colors) */
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d1e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fff3cd;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
/* Subtle border colors (slightly stronger than bg-subtle) */
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #a3cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #ffe69c;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
/* === TPC (True Perfect Code) Custom Colors === */
--tpc-panel-bg: #ffffde; /* Light yellow-tinted panel background */
--tpc-panel-border: 3px solid #bdbdbd; /* Medium gray border */
--tpc-panel-header-bg: #00007b; /* Dark blue header */
--tpc-panel-header-color: #fff; /* White text in header */
--tpc-panel-close-color: #fff; /* White close button */
--tpc-panel-close-hover-color: #bdbdbd; /* Gray on hover */
--tpc-panel-content-bg: white; /* Pure white content area */
--tpc-panel-content-color: #333; /* Dark gray text */
/* === Other Colors from Components === */
--bs-body-color: #212529; /* Default text color */
--bs-body-bg: #fff; /* Page background */
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
--bs-emphasis-color: #000; /* Strong text (bold) */
--bs-secondary-color: rgba(33, 37, 41, 0.75); /* Muted text */
--bs-tertiary-color: rgba(33, 37, 41, 0.5); /* Even more muted */
--bs-link-color: #0d6efd; /* Default link */
--bs-link-hover-color: #0a58ca; /* Link on hover */
--bs-code-color: #d63384; /* Inline code */
--bs-highlight-bg: #fff3cd; /* Marked text background */
--bs-border-color: #dee2e6; /* Default border */
--bs-border-color-translucent: rgba(0, 0, 0, 0.175); /* Semi-transparent border */
/* Accordion (Bootstrap) */
--bs-accordion-color: var(--bs-body-color);
--bs-accordion-bg: var(--bs-body-bg);
--bs-accordion-border-color: var(--bs-border-color);
--bs-accordion-active-color: var(--bs-primary-text-emphasis);
--bs-accordion-active-bg: var(--bs-primary-bg-subtle); /* #cfe2ff */
/* Accordion Native (TPC) */
--tpc-accordion-header-bg: var(--bs-light);
--tpc-accordion-header-color: var(--bs-body-color);
--tpc-accordion-content-bg: white;
--tpc-accordion-content-color: var(--bs-body-color);
--tpc-accordion-icon-color: var(--bs-body-color);
/* Drawer / Offcanvas */
--tpc-drawer-bg: var(--bs-body-bg, #fff);
--tpc-drawer-overlay-bg: var(--bs-offcanvas-backdrop-bg, rgba(0, 0, 0, 0.5));
--tpc-drawer-close-color: var(--bs-secondary-color, #6c757d);
/* Button Colors (Examples) */
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
/* Button Primary */
--bs-btn-primary-color: #fff;
--bs-btn-primary-bg: #0d6efd;
--bs-btn-primary-border-color: #0d6efd;
--bs-btn-primary-hover-bg: #0b5ed7;
--bs-btn-primary-active-bg: #0a58ca;
/* Other Button Colors (Summary) */
--bs-btn-secondary-bg: #6c757d;
--bs-btn-success-bg: #198754;
--bs-btn-danger-bg: #dc3545;
--bs-btn-warning-bg: #ffc107;
--bs-btn-info-bg: #0dcaf0;
--bs-btn-light-bg: #f8f9fa;
--bs-btn-dark-bg: #212529;
/* Outline Buttons (Example) */
--bs-btn-outline-primary-hover-bg: #fd0d40; /* Note: Likely a typo? Should be #0d6efd */
/* Progress Bar */
--bs-progress-bg: var(--bs-secondary-bg);
--bs-progress-bar-bg: #0d6efd;
--bs-progress-bar-color: #fff;
/* Toast */
--bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85);
--bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
--bs-toast-header-color: var(--bs-secondary-color);
/* Tooltip */
--bs-tooltip-bg: var(--bs-emphasis-color);
--bs-tooltip-color: var(--bs-body-bg);
/* Popover */
--bs-popover-bg: var(--bs-body-bg);
--bs-popover-header-bg: var(--bs-secondary-bg);
--bs-popover-body-color: var(--bs-body-color);
}/* ============================================================= */
/* === MONO THEME: 2 COLORS CONTROL EVERYTHING (CLASS-BASED) === */
/* ============================================================= */
/* Define your 2 colors here – change only these! */
:root {
/* LIGHT: Main accent color (buttons, links, highlights) */
--tpc-color-light: #FFFFFF; /* Default: White */
--tpc-color-light-rgb: 255, 255, 255;
/* DARK: Text, backgrounds, borders, secondary elements */
--tpc-color-dark: #0A0A0A; /* Default: Near Black */
--tpc-color-dark-rgb: 10, 10, 10;
}
/* Optional: Dark Mode Toggle (via class) */
[data-theme="dark"] {
--tpc-color-light: #FF00FF; /* Hot Magenta */
--tpc-color-dark: #000000;
}
/* P11Accordion */
.accordion {
color: var(--tpc-color-light);
--bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--tpc-color-light-rgb), 0.5);
}
.accordion-button:not(.collapsed) {
background-color: var(--tpc-color-light);
}
/* P11AccordionNative */
.tpc-accordion-nativ > div {
--tpc-accordion-content-bg: var(--tpc-color-light);
}
/* P11Button - Base */
.btn {
--bs-btn-font-weight: 700;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 6px rgba(0, 0, 0, 0.5);
}
/* SOLID BUTTONS – ALL USE --tpc-color-light */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
--bs-btn-bg: var(--tpc-color-light);
--bs-btn-border-color: var(--tpc-color-dark);
--bs-btn-color: #000;
--bs-btn-hover-bg: color-mix(in srgb, var(--tpc-color-light) 80%, black);
--bs-btn-hover-border-color: color-mix(in srgb, var(--tpc-color-light) 70%, black);
--bs-btn-active-bg: color-mix(in srgb, var(--tpc-color-light) 60%, black);
--bs-btn-active-border-color: color-mix(in srgb, var(--tpc-color-light) 50%, black);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5), 0 0 10px var(--tpc-color-light);
--bs-btn-focus-shadow-rgb: var(--tpc-color-light-rgb);
--bs-btn-disabled-bg: color-mix(in srgb, var(--tpc-color-light) 50%, gray);
--bs-btn-disabled-border-color: color-mix(in srgb, var(--tpc-color-light) 50%, gray);
}
/* LIGHT & DARK Buttons (Inverted for contrast) */
.btn-light {
--bs-btn-bg: var(--tpc-color-dark);
--bs-btn-border-color: color-mix(in srgb, var(--tpc-color-light) 30%, white);
--bs-btn-color: var(--tpc-color-light);
--bs-btn-hover-bg: color-mix(in srgb, var(--tpc-color-dark) 80%, white);
--bs-btn-active-bg: color-mix(in srgb, var(--tpc-color-dark) 60%, white);
}
.btn-dark {
--bs-btn-bg: var(--tpc-color-light);
--bs-btn-color: #000;
--bs-btn-hover-bg: color-mix(in srgb, var(--tpc-color-light) 80%, black);
}
/* OUTLINE BUTTONS */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
--bs-btn-color: var(--tpc-color-light);
--bs-btn-border-color: var(--tpc-color-light);
--bs-btn-hover-color: #000;
--bs-btn-color: #000;
--bs-btn-hover-bg: var(--tpc-color-light);
--bs-btn-active-bg: var(--tpc-color-light);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5), 0 0 10px var(--tpc-color-light);
--bs-btn-disabled-color: color-mix(in srgb, var(--tpc-color-light) 40%, gray);
}
/* LINK BUTTON */
.btn-link {
--bs-btn-color: var(--tpc-color-light);
--bs-btn-focus-shadow-rgb: var(--tpc-color-light-rgb);
}
/* P11Offcanvas */
.offcanvas {
--bs-offcanvas-bg: var(--tpc-color-dark);
--bs-offcanvas-color: var(--tpc-color-light);
}
/* P11FloatingPanel */
.tpc-floating-panel {
--tpc-panel-bg: var(--tpc-color-dark);
--tpc-panel-border: 5px solid var(--tpc-color-light);
--tpc-panel-shadow: 0 0 20px var(--tpc-color-light);
}
.tpc-floating-panel-header {
--tpc-panel-header-bg: var(--tpc-color-light);
--tpc-panel-header-color: #000;
}
.tpc-floating-panel-close:hover {
--tpc-panel-close-hover-color: var(--tpc-color-light);
}
.tpc-floating-panel-content {
--tpc-panel-content-bg: var(--tpc-color-dark);
--tpc-panel-content-color: var(--tpc-color-light);
}
/* P11Modal */
.modal {
--bs-modal-bg: var(--tpc-color-dark);
--bs-modal-color: var(--tpc-color-light);
--bs-modal-border-color: var(--tpc-color-light);
}
/* P11ProgressBar */
.progress {
--bs-progress-bar-bg: var(--tpc-color-light);
--bs-progress-bar-color: #000;
}
/* P11Toast */
.toast {
--bs-toast-bg: var(--tpc-color-dark);
--bs-toast-color: var(--tpc-color-light);
--bs-toast-border-color: var(--tpc-color-light);
}
/* P11Checkbox */
.form-check-input:checked {
background-color: var(--tpc-color-dark);
border-color: var(--tpc-color-dark);
}
.alert-primary,
.alert-secondary,
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
--bs-alert-color: var(--tpc-color-light);
--bs-alert-bg: var(--tpc-color-dark);
}