/* ============================================================================= * Theme Overrides — Color Palettes & Typography * Applied via data-color-palette attribute on * The "blue" palette matches the compiled defaults — included for completeness. * * NOTE: We do NOT override .text-primary / .bg-primary / .border-primary here. * Bootstrap's utilities already use rgba(var(--primary-rgb), var(--bg-opacity)) * so updating --primary and --primary-rgb on the root element is enough. * Adding !important hex overrides would break bg-opacity-10 tints (making icon * containers fully opaque) and cause icons to disappear. * ============================================================================= */ /* ── Palette: slate (secondary #247297) ─────────────────────────────────────── */ [data-color-palette="slate"] { --primary: #247297; --primary-rgb: 36, 114, 151; --component-active-bg: #247297; --component-active-bg-rgb: 36, 114, 151; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(36, 114, 151, 0.25); --link-color: #247297; --link-hover-color: #1b5672; --link-rgb-color: 36, 114, 151; } [data-color-palette="slate"] .btn-primary { --btn-bg: #247297; --btn-border-color: #247297; --btn-hover-bg: #206788; --btn-hover-border-color:#206788; --btn-active-bg: #1f6180; --btn-active-border-color:#1f6180; --btn-disabled-bg: #247297; --btn-disabled-border-color:#247297; --btn-focus-shadow-rgb: 69, 135, 167; } [data-color-palette="slate"] .btn-outline-primary { --btn-color: #247297; --btn-border-color: #247297; --btn-hover-bg: #247297; --btn-hover-border-color:#247297; --btn-active-bg: #1f6180; --btn-active-border-color:#247297; --btn-focus-shadow-rgb: 36, 114, 151; --btn-disabled-color: #247297; } /* ── Palette: indigo (#5C6BC0) ──────────────────────────────────────────────── */ [data-color-palette="indigo"] { --primary: #5C6BC0; --primary-rgb: 92, 107, 192; --component-active-bg: #5C6BC0; --component-active-bg-rgb: 92, 107, 192; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(92, 107, 192, 0.25); --link-color: #5C6BC0; --link-hover-color: #4a5ab9; --link-rgb-color: 92, 107, 192; } [data-color-palette="indigo"] .btn-primary { --btn-bg: #5C6BC0; --btn-border-color: #5C6BC0; --btn-hover-bg: #5360ad; --btn-hover-border-color:#5360ad; --btn-active-bg: #4e5ba3; --btn-active-border-color:#4e5ba3; --btn-disabled-bg: #5C6BC0; --btn-disabled-border-color:#5C6BC0; --btn-focus-shadow-rgb: 116, 129, 201; } [data-color-palette="indigo"] .btn-outline-primary { --btn-color: #5C6BC0; --btn-border-color: #5C6BC0; --btn-hover-bg: #5C6BC0; --btn-hover-border-color:#5C6BC0; --btn-active-bg: #4a5ab9; --btn-active-border-color:#5C6BC0; --btn-focus-shadow-rgb: 92, 107, 192; --btn-disabled-color: #5C6BC0; } /* ── Palette: purple (#8e70c1) ──────────────────────────────────────────────── */ [data-color-palette="purple"] { --primary: #8e70c1; --primary-rgb: 142, 112, 193; --component-active-bg: #8e70c1; --component-active-bg-rgb: 142, 112, 193; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(142, 112, 193, 0.25); --link-color: #8e70c1; --link-hover-color: #805eb9; --link-rgb-color: 142, 112, 193; } [data-color-palette="purple"] .btn-primary { --btn-bg: #8e70c1; --btn-border-color: #8e70c1; --btn-hover-bg: #8065ae; --btn-hover-border-color:#8065ae; --btn-active-bg: #795fa4; --btn-active-border-color:#795fa4; --btn-disabled-bg: #8e70c1; --btn-disabled-border-color:#8e70c1; --btn-focus-shadow-rgb: 159, 133, 202; } [data-color-palette="purple"] .btn-outline-primary { --btn-color: #8e70c1; --btn-border-color: #8e70c1; --btn-hover-bg: #8e70c1; --btn-hover-border-color:#8e70c1; --btn-active-bg: #805eb9; --btn-active-border-color:#8e70c1; --btn-focus-shadow-rgb: 142, 112, 193; --btn-disabled-color: #8e70c1; } /* ── Palette: pink (#f35c86) ────────────────────────────────────────────────── */ [data-color-palette="pink"] { --primary: #f35c86; --primary-rgb: 243, 92, 134; --component-active-bg: #f35c86; --component-active-bg-rgb: 243, 92, 134; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(243, 92, 134, 0.25); --link-color: #f35c86; --link-hover-color: #f14474; --link-rgb-color: 243, 92, 134; } [data-color-palette="pink"] .btn-primary { --btn-bg: #f35c86; --btn-border-color: #f35c86; --btn-hover-bg: #db5379; --btn-hover-border-color:#db5379; --btn-active-bg: #cf4e72; --btn-active-border-color:#cf4e72; --btn-disabled-bg: #f35c86; --btn-disabled-border-color:#f35c86; --btn-focus-shadow-rgb: 245, 116, 152; } [data-color-palette="pink"] .btn-outline-primary { --btn-color: #f35c86; --btn-border-color: #f35c86; --btn-hover-bg: #f35c86; --btn-hover-border-color:#f35c86; --btn-active-bg: #f14474; --btn-active-border-color:#f35c86; --btn-focus-shadow-rgb: 243, 92, 134; --btn-disabled-color: #f35c86; } /* ── Palette: red (#EF4444) ─────────────────────────────────────────────────── */ [data-color-palette="red"] { --primary: #EF4444; --primary-rgb: 239, 68, 68; --component-active-bg: #EF4444; --component-active-bg-rgb: 239, 68, 68; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(239, 68, 68, 0.25); --link-color: #EF4444; --link-hover-color: #d73d3d; --link-rgb-color: 239, 68, 68; } [data-color-palette="red"] .btn-primary { --btn-bg: #EF4444; --btn-border-color: #EF4444; --btn-hover-bg: #d73d3d; --btn-hover-border-color:#d73d3d; --btn-active-bg: #cb3a3a; --btn-active-border-color:#cb3a3a; --btn-disabled-bg: #EF4444; --btn-disabled-border-color:#EF4444; --btn-focus-shadow-rgb: 241, 96, 96; } [data-color-palette="red"] .btn-outline-primary { --btn-color: #EF4444; --btn-border-color: #EF4444; --btn-hover-bg: #EF4444; --btn-hover-border-color:#EF4444; --btn-active-bg: #d73d3d; --btn-active-border-color:#EF4444; --btn-focus-shadow-rgb: 239, 68, 68; --btn-disabled-color: #EF4444; } /* ── Palette: orange (#f58646) ──────────────────────────────────────────────── */ [data-color-palette="orange"] { --primary: #f58646; --primary-rgb: 245, 134, 70; --component-active-bg: #f58646; --component-active-bg-rgb: 245, 134, 70; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(245, 134, 70, 0.25); --link-color: #f58646; --link-hover-color: #dd793f; --link-rgb-color: 245, 134, 70; } [data-color-palette="orange"] .btn-primary { --btn-bg: #f58646; --btn-border-color: #f58646; --btn-hover-bg: #dd793f; --btn-hover-border-color:#dd793f; --btn-active-bg: #d0723c; --btn-active-border-color:#d0723c; --btn-disabled-bg: #f58646; --btn-disabled-border-color:#f58646; --btn-focus-shadow-rgb: 247, 152, 98; } [data-color-palette="orange"] .btn-outline-primary { --btn-color: #f58646; --btn-border-color: #f58646; --btn-hover-bg: #f58646; --btn-hover-border-color:#f58646; --btn-active-bg: #dd793f; --btn-active-border-color:#f58646; --btn-focus-shadow-rgb: 245, 134, 70; --btn-disabled-color: #f58646; } /* ── Palette: yellow (#ffd648) ──────────────────────────────────────────────── */ [data-color-palette="yellow"] { --primary: #ffd648; --primary-rgb: 255, 214, 72; --component-active-bg: #ffd648; --component-active-bg-rgb: 255, 214, 72; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(255, 214, 72, 0.25); --link-color: #d4a800; --link-hover-color: #b08d00; --link-rgb-color: 255, 214, 72; } [data-color-palette="yellow"] .btn-primary { --btn-color: #000; --btn-bg: #ffd648; --btn-border-color: #ffd648; --btn-hover-color: #000; --btn-hover-bg: #f9d146; --btn-hover-border-color:#f9d146; --btn-active-color: #000; --btn-active-bg: #f2cb44; --btn-active-border-color:#f9d146; --btn-disabled-color: #000; --btn-disabled-bg: #ffd648; --btn-disabled-border-color:#ffd648; --btn-focus-shadow-rgb: 217, 182, 61; } [data-color-palette="yellow"] .btn-outline-primary { --btn-color: #b08d00; --btn-border-color: #ffd648; --btn-hover-color: #000; --btn-hover-bg: #ffd648; --btn-hover-border-color:#ffd648; --btn-active-bg: #f2cb44; --btn-active-border-color:#ffd648; --btn-focus-shadow-rgb: 255, 214, 72; --btn-disabled-color: #b08d00; } /* ── Palette: green (#059669) ───────────────────────────────────────────────── */ [data-color-palette="green"] { --primary: #059669; --primary-rgb: 5, 150, 105; --component-active-bg: #059669; --component-active-bg-rgb: 5, 150, 105; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(5, 150, 105, 0.25); --link-color: #059669; --link-hover-color: #04785a; --link-rgb-color: 5, 150, 105; } [data-color-palette="green"] .btn-primary { --btn-bg: #059669; --btn-border-color: #059669; --btn-hover-bg: #05875f; --btn-hover-border-color:#05875f; --btn-active-bg: #048059; --btn-active-border-color:#048059; --btn-disabled-bg: #059669; --btn-disabled-border-color:#059669; --btn-focus-shadow-rgb: 43, 166, 128; } [data-color-palette="green"] .btn-outline-primary { --btn-color: #059669; --btn-border-color: #059669; --btn-hover-bg: #059669; --btn-hover-border-color:#059669; --btn-active-bg: #048059; --btn-active-border-color:#059669; --btn-focus-shadow-rgb: 5, 150, 105; --btn-disabled-color: #059669; } /* ── Palette: teal (#26A69A) ────────────────────────────────────────────────── */ [data-color-palette="teal"] { --primary: #26A69A; --primary-rgb: 38, 166, 154; --component-active-bg: #26A69A; --component-active-bg-rgb: 38, 166, 154; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(38, 166, 154, 0.25); --link-color: #26A69A; --link-hover-color: #208d83; --link-rgb-color: 38, 166, 154; } [data-color-palette="teal"] .btn-primary { --btn-bg: #26A69A; --btn-border-color: #26A69A; --btn-hover-bg: #22958b; --btn-hover-border-color:#22958b; --btn-active-bg: #208d83; --btn-active-border-color:#208d83; --btn-disabled-bg: #26A69A; --btn-disabled-border-color:#26A69A; --btn-focus-shadow-rgb: 71, 179, 169; } [data-color-palette="teal"] .btn-outline-primary { --btn-color: #26A69A; --btn-border-color: #26A69A; --btn-hover-bg: #26A69A; --btn-hover-border-color:#26A69A; --btn-active-bg: #208d83; --btn-active-border-color:#26A69A; --btn-focus-shadow-rgb: 38, 166, 154; --btn-disabled-color: #26A69A; } /* ── Navbar: primary-color background (tracks the active palette) ───────────── */ .navbar-primary { --navbar-bg: var(--primary); --navbar-color: #fff; --navbar-hover-color: rgba(255, 255, 255, 0.85); --navbar-disabled-color: rgba(255, 255, 255, 0.5); --navbar-active-color: #fff; --navbar-brand-color: #fff; --navbar-brand-hover-color: #fff; --navbar-hover-bg: rgba(0, 0, 0, 0.12); --navbar-hover-active-bg: rgba(0, 0, 0, 0.18); --navbar-hover-active-color: #fff; --navbar-active-bg: rgba(0, 0, 0, 0.18); color-scheme: dark; } /* Search input inside primary navbar */ .navbar-primary .form-control { --input-bg: rgba(0, 0, 0, 0.15); --input-border-color: rgba(255, 255, 255, 0.2); --input-color: #fff; --input-placeholder-color: rgba(255, 255, 255, 0.6); } .navbar-primary .form-control:focus { --input-bg: rgba(0, 0, 0, 0.2); } /* Icons / nav-link text inside primary navbar */ .navbar-primary .navbar-nav-link, .navbar-primary .navbar-nav-link i, .navbar-primary .navbar-toggler { color: #fff !important; } .navbar-primary .navbar-nav-link:hover, .navbar-primary .navbar-nav-link:focus { color: rgba(255, 255, 255, 0.85) !important; } /* ── Navbar: light scheme — ensure icons & search text are visible ───────────── */ .navbar-light { --navbar-color: var(--body-color); --navbar-hover-color: var(--body-color); --navbar-active-color: var(--link-color); --navbar-brand-color: var(--link-color); --navbar-brand-hover-color: var(--link-color); --navbar-hover-bg: var(--gray-100); --navbar-hover-active-bg: var(--gray-200); --navbar-hover-active-color: var(--body-color); --navbar-active-bg: rgba(var(--primary-rgb), 0.1); } /* Nav-link icons & text */ .navbar-light .navbar-nav-link, .navbar-light .navbar-nav-link i, .navbar-light .navbar-toggler { color: var(--body-color) !important; } .navbar-light .navbar-nav-link:hover, .navbar-light .navbar-nav-link:focus { color: var(--body-color) !important; background-color: var(--gray-100); } /* Search input */ .navbar-light .form-control { --input-bg: var(--gray-100); --input-border-color: var(--border-color); --input-color: var(--body-color); --input-placeholder-color: var(--text-muted); } .navbar-light .form-control:focus { --input-bg: var(--white); } /* Search icon inside the input */ .navbar-light .form-control-feedback-icon { color: var(--text-muted); } /* User name text */ .navbar-light .navbar-nav-link span { color: var(--body-color); } /* ── Sidebar: custom background color ──────────────────────────────────────── */ .sidebar-custom { --sidebar-bg: var(--custom-sidebar-bg, #252b36); --sidebar-border-color: transparent; color-scheme: dark; } .sidebar-custom .nav-sidebar { --nav-sidebar-divider-color: rgba(255, 255, 255, 0.125); --nav-link-color: rgba(255, 255, 255, 0.85); --nav-link-hover-color: #fff; --nav-link-hover-bg: rgba(255, 255, 255, 0.1); --nav-link-hover-active-bg: rgba(255, 255, 255, 0.15); --nav-link-active-color: #fff; --nav-link-active-bg: rgba(255, 255, 255, 0.15); --nav-link-disabled-color: rgba(255, 255, 255, 0.5); } .sidebar-custom .btn-sidebar-expand { --btn-bg: var(--custom-sidebar-bg, #252b36); --btn-hover-bg: rgba(255, 255, 255, 0.08); --btn-active-bg: rgba(255, 255, 255, 0.12); } /* ── Sidebar: primary-color background (tracks the active palette) ──────────── */ .sidebar-primary { --sidebar-bg: var(--primary); --sidebar-border-color: transparent; color-scheme: dark; } .sidebar-primary .nav-sidebar { --nav-sidebar-divider-color: rgba(255, 255, 255, 0.2); --nav-link-color: rgba(255, 255, 255, 0.85); --nav-link-hover-color: #fff; --nav-link-hover-bg: rgba(0, 0, 0, 0.12); --nav-link-hover-active-bg: rgba(0, 0, 0, 0.18); --nav-link-active-color: #fff; --nav-link-active-bg: rgba(0, 0, 0, 0.18); --nav-link-disabled-color: rgba(255, 255, 255, 0.5); } .sidebar-primary .btn-sidebar-expand { --btn-bg: var(--primary); --btn-hover-bg: rgba(0, 0, 0, 0.1); --btn-active-bg: rgba(0, 0, 0, 0.15); } /* ── Palette: custom (user-defined via --custom-primary) ───────────────────── */ [data-color-palette="custom"] { --primary: var(--custom-primary, #0c83ff); --primary-rgb: var(--custom-primary-rgb, 12, 131, 255); --component-active-bg: var(--custom-primary, #0c83ff); --component-active-bg-rgb: var(--custom-primary-rgb, 12, 131, 255); --focus-ring-box-shadow: 0 0 0 0.125rem rgba(var(--custom-primary-rgb, 12, 131, 255), 0.25); --link-color: var(--custom-primary, #0c83ff); --link-hover-color: var(--custom-primary-dark, #096fd9); --link-rgb-color: var(--custom-primary-rgb, 12, 131, 255); } [data-color-palette="custom"] .btn-primary { --btn-bg: var(--custom-primary, #0c83ff); --btn-border-color: var(--custom-primary, #0c83ff); --btn-hover-bg: var(--custom-primary-dark, #096fd9); --btn-hover-border-color:var(--custom-primary-dark, #096fd9); --btn-active-bg: var(--custom-primary-dark, #096fd9); --btn-active-border-color:var(--custom-primary-dark, #096fd9); --btn-disabled-bg: var(--custom-primary, #0c83ff); --btn-disabled-border-color:var(--custom-primary, #0c83ff); --btn-focus-shadow-rgb: var(--custom-primary-rgb, 12, 131, 255); } [data-color-palette="custom"] .btn-outline-primary { --btn-color: var(--custom-primary, #0c83ff); --btn-border-color: var(--custom-primary, #0c83ff); --btn-hover-bg: var(--custom-primary, #0c83ff); --btn-hover-border-color:var(--custom-primary, #0c83ff); --btn-active-bg: var(--custom-primary-dark, #096fd9); --btn-active-border-color:var(--custom-primary, #0c83ff); --btn-focus-shadow-rgb: var(--custom-primary-rgb, 12, 131, 255); --btn-disabled-color: var(--custom-primary, #0c83ff); } /* ── Palette: cyan (#049aad) ────────────────────────────────────────────────── */ [data-color-palette="cyan"] { --primary: #049aad; --primary-rgb: 4, 154, 173; --component-active-bg: #049aad; --component-active-bg-rgb: 4, 154, 173; --focus-ring-box-shadow: 0 0 0 0.125rem rgba(4, 154, 173, 0.25); --link-color: #049aad; --link-hover-color: #038393; --link-rgb-color: 4, 154, 173; } [data-color-palette="cyan"] .btn-primary { --btn-bg: #049aad; --btn-border-color: #049aad; --btn-hover-bg: #048b9c; --btn-hover-border-color:#048b9c; --btn-active-bg: #038393; --btn-active-border-color:#038393; --btn-disabled-bg: #049aad; --btn-disabled-border-color:#049aad; --btn-focus-shadow-rgb: 42, 169, 185; } [data-color-palette="cyan"] .btn-outline-primary { --btn-color: #049aad; --btn-border-color: #049aad; --btn-hover-bg: #049aad; --btn-hover-border-color:#049aad; --btn-active-bg: #038393; --btn-active-border-color:#049aad; --btn-focus-shadow-rgb: 4, 154, 173; --btn-disabled-color: #049aad; }