/* Color Schemes for the whole site Controlled via [data-color-scheme] on . Supported values: default, catppuccin, cyberdream, tokyonight, gruvbox. Works alongside Bootstrap theme mode [data-bs-theme]. Note: Metronic/Bootstrap components rely on many derived CSS variables (e.g., --bs-btn-*, --bs-navbar-*, --bs-body-*-rgb). Some are hardcoded by the base bundle. This file bridges scheme tokens to those component variables to ensure navbars, inputs, and buttons follow the selected color scheme without recompiling SCSS. */ /* Defaults: do nothing special, rely on base theme values. */ html[data-color-scheme="default"] {} /* Catppuccin (Latte for light, Mocha for dark) */ /* Light (Latte) */ html[data-color-scheme="catppuccin"][data-bs-theme="light"], html[data-color-scheme="catppuccin-mocha"][data-bs-theme="light"] { --app-header-bg: var(--bs-body-bg); --bs-body-bg: #eff1f5; /* latte base */ --bs-body-color: #2f3247; /* darker text for contrast */ --bs-body-bg-rgb: 239, 241, 245; --bs-body-color-rgb: 47, 50, 71; --bs-emphasis-color: var(--bs-body-color); --bs-emphasis-color-rgb: var(--bs-body-color-rgb); --bs-border-color: #bbc2cf; /* stronger border for contrast */ --bs-primary: #1e66f5; /* blue */ --bs-primary-rgb: 30, 102, 245; --bs-secondary: #8839ef; /* mauve */ --bs-secondary-rgb: 136, 57, 239; --bs-info: #04a5e5; /* sapphire */ --bs-success: #40a02b; /* green */ --bs-warning: #df8e1d; /* yellow */ --bs-danger: #d20f39; /* red */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #0b4fd1; /* Text tokens for btn-color-* utilities */ --bs-text-primary: var(--bs-primary); --bs-text-secondary: var(--bs-secondary); --bs-text-muted: rgba(var(--bs-body-color-rgb), 0.65); /* Active/light/inverse tokens for interactive states */ --bs-primary-active: var(--bs-primary); --bs-secondary-active: var(--bs-secondary); --bs-primary-light: rgba(var(--bs-primary-rgb), .12); --bs-secondary-light: rgba(var(--bs-secondary-rgb), .12); --bs-primary-inverse: #ffffff; --bs-secondary-inverse: #ffffff; /* Sidebar separation */ --app-sidebar-bg: #e6e9ef; --app-sidebar-color: var(--bs-body-color); --app-sidebar-border-color: #b6bdc9; --app-sidebar-hover-bg: rgba(var(--bs-primary-rgb), .06); --app-sidebar-active-bg: rgba(var(--bs-primary-rgb), .12); --app-sidebar-active-color: var(--bs-primary); /* Header / toolbar variables */ --bs-app-header-base-bg-color: var(--app-header-bg); --bs-app-header-minimize-bg-color: var(--app-header-bg); --bs-app-toolbar-base-bg-color: var(--app-header-bg); --bs-app-aside-base-bg-color: var(--app-sidebar-bg); } /* Dark (Mocha) */ html[data-color-scheme="catppuccin"][data-bs-theme="dark"], html[data-color-scheme="catppuccin-mocha"][data-bs-theme="dark"] { --app-header-bg: var(--bs-body-bg); --bs-body-bg: #1e1e2e; /* base */ --bs-body-color: #d5defb; /* slightly brighter text for contrast */ --bs-body-bg-rgb: 30, 30, 46; --bs-body-color-rgb: 213, 222, 251; --bs-emphasis-color: var(--bs-body-color); --bs-emphasis-color-rgb: var(--bs-body-color-rgb); --bs-border-color: #3b3d54; /* lighter border for dark contrast */ --bs-primary: #89b4fa; /* blue */ --bs-primary-rgb: 137, 180, 250; --bs-secondary: #cba6f7; /* mauve */ --bs-secondary-rgb: 203, 166, 247; --bs-info: #74c7ec; /* sapphire */ --bs-success: #a6e3a1; /* green */ --bs-warning: #f9e2af; /* yellow */ --bs-danger: #f38ba8; /* red */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #c7daff; /* Text tokens for btn-color-* utilities */ --bs-text-primary: var(--bs-primary); --bs-text-secondary: var(--bs-secondary); --bs-text-muted: rgba(var(--bs-body-color-rgb), 0.65); /* Active/light/inverse tokens for interactive states */ --bs-primary-active: var(--bs-primary); --bs-secondary-active: var(--bs-secondary); --bs-primary-light: rgba(var(--bs-primary-rgb), .18); --bs-secondary-light: rgba(var(--bs-secondary-rgb), .18); --bs-primary-inverse: #ffffff; --bs-secondary-inverse: #ffffff; /* Sidebar separation */ --app-sidebar-bg: #181825; --app-sidebar-color: var(--bs-body-color); --app-sidebar-border-color: #32344a; --app-sidebar-hover-bg: rgba(var(--bs-primary-rgb), .08); --app-sidebar-active-bg: rgba(var(--bs-primary-rgb), .14); --app-sidebar-active-color: var(--bs-primary); /* Header / toolbar variables */ --bs-app-header-base-bg-color: var(--app-header-bg); --bs-app-header-minimize-bg-color: var(--app-header-bg); --bs-app-toolbar-base-bg-color: var(--app-header-bg); --bs-app-aside-base-bg-color: var(--app-sidebar-bg); } /* Cyberdream (neon, dark-forward, with light variant) */ /* Light variant */ html[data-color-scheme="cyberdream"][data-bs-theme="light"] { --app-header-bg: var(--bs-body-bg); --bs-body-bg: #f5f7fb; --bs-body-color: #161a2b; /* deeper text */ --bs-body-bg-rgb: 245, 247, 251; --bs-body-color-rgb: 22, 26, 43; --bs-emphasis-color: var(--bs-body-color); --bs-emphasis-color-rgb: var(--bs-body-color-rgb); --bs-border-color: #cfd7ec; /* darker border */ --bs-primary: #7aa2f7; /* blue */ --bs-primary-rgb: 122, 162, 247; --bs-secondary: #bb9af7; /* purple */ --bs-secondary-rgb: 187, 154, 247; --bs-info: #7dcfff; /* cyan */ --bs-success: #9ece6a; /* green */ --bs-warning: #e0af68; /* amber */ --bs-danger: #f7768e; /* red/pink */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #3e78ff; --bs-text-primary: var(--bs-primary); --bs-text-secondary: var(--bs-secondary); --bs-text-muted: rgba(var(--bs-body-color-rgb), 0.65); --bs-primary-active: var(--bs-primary); --bs-secondary-active: var(--bs-secondary); --bs-primary-light: rgba(var(--bs-primary-rgb), .12); --bs-secondary-light: rgba(var(--bs-secondary-rgb), .12); --bs-primary-inverse: #ffffff; --bs-secondary-inverse: #ffffff; /* Sidebar separation */ --app-sidebar-bg: #eef1f8; --app-sidebar-color: var(--bs-body-color); --app-sidebar-border-color: #c8d1e7; --app-sidebar-hover-bg: rgba(var(--bs-primary-rgb), .06); --app-sidebar-active-bg: rgba(var(--bs-primary-rgb), .12); --app-sidebar-active-color: var(--bs-primary); /* Header / toolbar variables */ --bs-app-header-base-bg-color: var(--app-header-bg); --bs-app-header-minimize-bg-color: var(--app-header-bg); --bs-app-toolbar-base-bg-color: var(--app-header-bg); --bs-app-aside-base-bg-color: var(--app-sidebar-bg); } /* Dark variant */ html[data-color-scheme="cyberdream"][data-bs-theme="dark"] { --app-header-bg: var(--bs-body-bg); --bs-body-bg: #0f0f17; --bs-body-color: #e6e8ee; /* brighter */ --bs-body-bg-rgb: 15, 15, 23; --bs-body-color-rgb: 230, 232, 238; --bs-emphasis-color: var(--bs-body-color); --bs-emphasis-color-rgb: var(--bs-body-color-rgb); --bs-border-color: #32324a; /* lighter border */ --bs-primary: #7aa2f7; --bs-primary-rgb: 122, 162, 247; --bs-secondary: #bb9af7; --bs-secondary-rgb: 187, 154, 247; --bs-info: #7dcfff; --bs-success: #9ece6a; --bs-warning: #e0af68; --bs-danger: #f7768e; --bs-link-color: var(--bs-primary); --bs-link-hover-color: #bfd1ff; --bs-text-primary: var(--bs-primary); --bs-text-secondary: var(--bs-secondary); --bs-text-muted: rgba(var(--bs-body-color-rgb), 0.65); --bs-primary-active: var(--bs-primary); --bs-secondary-active: var(--bs-secondary); --bs-primary-light: rgba(var(--bs-primary-rgb), .18); --bs-secondary-light: rgba(var(--bs-secondary-rgb), .18); --bs-primary-inverse: #ffffff; --bs-secondary-inverse: #ffffff; /* Sidebar separation */ --app-sidebar-bg: #0b0b12; --app-sidebar-color: var(--bs-body-color); --app-sidebar-border-color: #2a2a40; --app-sidebar-hover-bg: rgba(var(--bs-primary-rgb), .08); --app-sidebar-active-bg: rgba(var(--bs-primary-rgb), .14); --app-sidebar-active-color: var(--bs-primary); /* Header / toolbar variables */ --bs-app-header-base-bg-color: var(--app-header-bg); --bs-app-header-minimize-bg-color: var(--app-header-bg); --bs-app-toolbar-base-bg-color: var(--app-header-bg); --bs-app-aside-base-bg-color: var(--app-sidebar-bg); } /* Helpful extras for components relying on app background tokens */ html[data-bs-theme="dark"][data-color-scheme="catppuccin"], html[data-bs-theme="dark"][data-color-scheme="catppuccin-mocha"], html[data-bs-theme="dark"][data-color-scheme="cyberdream"] { color-scheme: dark; } html[data-bs-theme="light"][data-color-scheme="catppuccin"], html[data-bs-theme="light"][data-color-scheme="catppuccin-mocha"], html[data-bs-theme="light"][data-color-scheme="cyberdream"] { color-scheme: light; } /* Menu active indicator for color scheme items */ .menu-link .color-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .5rem; } .menu-link .color-check { display: none; margin-left: auto; } .menu-link.active .color-check { display: inline-flex; } /* Tokyonight */ /* Light */ html[data-color-scheme="tokyonight"][data-bs-theme="light"] { --app-header-bg: var(--bs-body-bg); --bs-body-bg: #e6eaf3; --bs-body-color: #1b2033; /* deeper */ --bs-body-bg-rgb: 230, 234, 243; --bs-body-color-rgb: 27, 32, 51; --bs-emphasis-color: var(--bs-body-color); --bs-emphasis-color-rgb: var(--bs-body-color-rgb); --bs-border-color: #bfc9e0; /* darker border */ --bs-primary: #7aa2f7; --bs-primary-rgb: 122, 162, 247; --bs-secondary: #bb9af7; --bs-secondary-rgb: 187, 154, 247; --bs-info: #7dcfff; --bs-success: #9ece6a; --bs-warning: #e0af68; --bs-danger: #f7768e; --bs-link-color: var(--bs-primary); --bs-link-hover-color: #3e78ff; --bs-text-primary: var(--bs-primary); --bs-text-secondary: var(--bs-secondary); --bs-text-muted: rgba(var(--bs-body-color-rgb), 0.65); --bs-primary-active: var(--bs-primary); --bs-secondary-active: var(--bs-secondary); --bs-primary-light: rgba(var(--bs-primary-rgb), .12); --bs-secondary-light: rgba(var(--bs-secondary-rgb), .12); --bs-primary-inverse: #ffffff; --bs-secondary-inverse: #ffffff; /* Sidebar separation */ --app-sidebar-bg: #dde3ef; --app-sidebar-color: var(--bs-body-color); --app-sidebar-border-color: #b5c1db; --app-sidebar-hover-bg: rgba(var(--bs-primary-rgb), .06); --app-sidebar-active-bg: rgba(var(--bs-primary-rgb), .12); --app-sidebar-active-color: var(--bs-primary); /* Header / toolbar variables */ --bs-app-header-base-bg-color: var(--app-header-bg); --bs-app-header-minimize-bg-color: var(--app-header-bg); --bs-app-toolbar-base-bg-color: var(--app-header-bg); --bs-app-aside-base-bg-color: var(--app-sidebar-bg); } /* Dark */ html[data-color-scheme="tokyonight"][data-bs-theme="dark"] { --app-header-bg: var(--bs-body-bg); --bs-body-bg: #1a1b26; --bs-body-color: #c9d2fb; /* brighter */ --bs-body-bg-rgb: 26, 27, 38; --bs-body-color-rgb: 201, 210, 251; --bs-emphasis-color: var(--bs-body-color); --bs-emphasis-color-rgb: var(--bs-body-color-rgb); --bs-border-color: #373a57; /* lighter border */ --bs-primary: #7aa2f7; --bs-primary-rgb: 122, 162, 247; --bs-secondary: #bb9af7; --bs-secondary-rgb: 187, 154, 247; --bs-info: #7dcfff; --bs-success: #9ece6a; --bs-warning: #e0af68; --bs-danger: #f7768e; --bs-link-color: var(--bs-primary); --bs-link-hover-color: #bfd1ff; --bs-text-primary: var(--bs-primary); --bs-text-secondary: var(--bs-secondary); --bs-text-muted: rgba(var(--bs-body-color-rgb), 0.65); --bs-primary-active: var(--bs-primary); --bs-secondary-active: var(--bs-secondary); --bs-primary-light: rgba(var(--bs-primary-rgb), .18); --bs-secondary-light: rgba(var(--bs-secondary-rgb), .18); --bs-primary-inverse: #ffffff; --bs-secondary-inverse: #ffffff; /* Sidebar separation */ --app-sidebar-bg: #14151f; --app-sidebar-color: var(--bs-body-color); --app-sidebar-border-color: #30324f; --app-sidebar-hover-bg: rgba(var(--bs-primary-rgb), .08); --app-sidebar-active-bg: rgba(var(--bs-primary-rgb), .14); --app-sidebar-active-color: var(--bs-primary); /* Header / toolbar variables */ --bs-app-header-base-bg-color: var(--app-header-bg); --bs-app-header-minimize-bg-color: var(--app-header-bg); --bs-app-toolbar-base-bg-color: var(--app-header-bg); --bs-app-aside-base-bg-color: var(--app-sidebar-bg); } /* Gruvbox */ /* Light (Hard) */ html[data-color-scheme="gruvbox"][data-bs-theme="light"] { --app-header-bg: var(--bs-body-bg); --bs-body-bg: #fbf1c7; /* bg */ --bs-body-color: #2a2826; /* deeper */ --bs-body-bg-rgb: 251, 241, 199; --bs-body-color-rgb: 42, 40, 38; --bs-emphasis-color: var(--bs-body-color); --bs-emphasis-color-rgb: var(--bs-body-color-rgb); --bs-border-color: #cbb894; /* darker border */ --bs-primary: #458588; /* blueish */ --bs-primary-rgb: 69, 133, 136; --bs-secondary: #b16286; /* purple */ --bs-secondary-rgb: 177, 98, 134; --bs-info: #83a598; /* aqua */ --bs-success: #98971a; /* green */ --bs-warning: #d79921; /* yellow */ --bs-danger: #cc241d; /* red */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #2a5f67; --bs-text-primary: var(--bs-primary); --bs-text-secondary: var(--bs-secondary); --bs-text-muted: rgba(var(--bs-body-color-rgb), 0.65); --bs-primary-active: var(--bs-primary); --bs-secondary-active: var(--bs-secondary); --bs-primary-light: rgba(var(--bs-primary-rgb), .12); --bs-secondary-light: rgba(var(--bs-secondary-rgb), .12); --bs-primary-inverse: #ffffff; --bs-secondary-inverse: #ffffff; /* Sidebar separation */ --app-sidebar-bg: #f0e5b2; --app-sidebar-color: var(--bs-body-color); --app-sidebar-border-color: #c2b086; --app-sidebar-hover-bg: rgba(var(--bs-primary-rgb), .06); --app-sidebar-active-bg: rgba(var(--bs-primary-rgb), .12); --app-sidebar-active-color: var(--bs-primary); /* Header / toolbar variables */ --bs-app-header-base-bg-color: var(--app-header-bg); --bs-app-header-minimize-bg-color: var(--app-header-bg); --bs-app-toolbar-base-bg-color: var(--app-header-bg); --bs-app-aside-base-bg-color: var(--app-sidebar-bg); } /* Dark (Medium) */ html[data-color-scheme="gruvbox"][data-bs-theme="dark"] { --app-header-bg: var(--bs-body-bg); --bs-body-bg: #282828; /* bg */ --bs-body-color: #efe2bf; /* brighter */ --bs-body-bg-rgb: 40, 40, 40; --bs-body-color-rgb: 239, 226, 191; --bs-emphasis-color: var(--bs-body-color); --bs-emphasis-color-rgb: var(--bs-body-color-rgb); --bs-border-color: #46413d; /* lighter border */ --bs-primary: #83a598; /* aqua/blue */ --bs-primary-rgb: 131, 165, 152; --bs-secondary: #d3869b; /* purple */ --bs-secondary-rgb: 211, 134, 155; --bs-info: #8ec07c; /* aqua */ --bs-success: #b8bb26; /* green */ --bs-warning: #fabd2f; /* yellow */ --bs-danger: #fb4934; /* red */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #b9d3c2; --bs-text-primary: var(--bs-primary); --bs-text-secondary: var(--bs-secondary); --bs-text-muted: rgba(var(--bs-body-color-rgb), 0.65); --bs-primary-active: var(--bs-primary); --bs-secondary-active: var(--bs-secondary); --bs-primary-light: rgba(var(--bs-primary-rgb), .18); --bs-secondary-light: rgba(var(--bs-secondary-rgb), .18); --bs-primary-inverse: #ffffff; --bs-secondary-inverse: #ffffff; /* Sidebar separation */ --app-sidebar-bg: #202020; --app-sidebar-color: var(--bs-body-color); --app-sidebar-border-color: #3a3531; --app-sidebar-hover-bg: rgba(var(--bs-primary-rgb), .08); --app-sidebar-active-bg: rgba(var(--bs-primary-rgb), .14); --app-sidebar-active-color: var(--bs-primary); /* Header / toolbar variables */ --bs-app-header-base-bg-color: var(--app-header-bg); --bs-app-header-minimize-bg-color: var(--app-header-bg); --bs-app-toolbar-base-bg-color: var(--app-header-bg); --bs-app-aside-base-bg-color: var(--app-sidebar-bg); } /* Component token bridges Ensures buttons, inputs, navbars, cards, and menus derive from scheme vars. */ /* Buttons: map to semantic tokens */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); } .btn-secondary { --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-active-bg: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); } .btn-success { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); } .btn-info { --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); } .btn-warning { --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-bg: var(--bs-warning); --bs-btn-hover-border-color: var(--bs-warning); --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning); } .btn-danger { --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); } /* Inputs/selects: use body + border tokens */ .form-control, .form-select, .input-group-text, .form-control:focus, .form-select:focus { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } .form-control::placeholder { color: rgba(var(--bs-body-color-rgb), 0.6); } /* Navbar: align colors + bg with scheme */ .navbar { --bs-navbar-color: rgba(var(--bs-body-color-rgb), 0.85); --bs-navbar-hover-color: var(--bs-body-color); --bs-navbar-active-color: var(--bs-body-color); --bs-navbar-brand-color: var(--bs-body-color); --bs-navbar-brand-hover-color: var(--bs-body-color); background-color: var(--bs-body-bg); } /* Card and dropdown backgrounds to match scheme */ .card, .dropdown-menu, .modal-content, .popover { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } /* Links inherit scheme */ a { color: var(--bs-link-color); } a:hover { color: var(--bs-link-hover-color); } /* Sidebar: apply scheme to app sidebar and its menu/content */ .app-sidebar { background-color: var(--app-sidebar-bg, var(--bs-body-bg)); color: var(--app-sidebar-color, var(--bs-body-color)); border-right: 1px solid var(--app-sidebar-border-color, var(--bs-border-color)); } .app-sidebar .menu .menu-heading, .app-sidebar .menu .menu-link, .app-sidebar .menu .menu-title, .app-sidebar .menu .menu-icon { color: var(--app-sidebar-color, var(--bs-body-color)); } .app-sidebar .menu .menu-link:hover { background-color: var(--app-sidebar-hover-bg, rgba(var(--bs-primary-rgb, 13,110,253), .08)); color: var(--app-sidebar-hover-color, var(--bs-body-color)); } .app-sidebar .menu .menu-link.active { background-color: var(--app-sidebar-active-bg, rgba(var(--bs-primary-rgb, 13,110,253), .12)); color: var(--app-sidebar-active-color, var(--bs-primary)); } .app-sidebar .menu .menu-link.active .menu-title, .app-sidebar .menu .menu-link.active .menu-icon, .app-sidebar .menu .menu-link:hover .menu-title, .app-sidebar .menu .menu-link:hover .menu-icon { color: var(--app-sidebar-active-color, var(--bs-primary)); } .app-sidebar .menu .menu-bullet .bullet { background-color: var(--app-sidebar-bullet-color, var(--bs-border-color)); } .app-sidebar .menu .menu-link.active .menu-bullet .bullet { background-color: var(--app-sidebar-active-color, var(--bs-primary)); } /* Force override Metronic dark-sidebar defaults with scheme-aware values */ [data-kt-app-layout="dark-sidebar"] .app-sidebar { background-color: var(--app-sidebar-bg, var(--bs-body-bg)) !important; border-right: 1px solid var(--app-sidebar-border-color, var(--bs-border-color)) !important; } [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-heading { color: rgba(var(--bs-body-color-rgb), 0.7) !important; } [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link { color: var(--app-sidebar-color, var(--bs-body-color)) !important; } [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link .menu-title { color: var(--app-sidebar-color, var(--bs-body-color)) !important; } [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link .menu-icon, [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link .menu-icon .svg-icon, [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link .menu-icon i { color: rgba(var(--bs-body-color-rgb), 0.65) !important; } [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link .menu-bullet .bullet { background-color: rgba(var(--bs-body-color-rgb), 0.45) !important; } [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here), [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) { background-color: var(--app-sidebar-hover-bg, rgba(var(--bs-primary-rgb, 13,110,253), .08)) !important; } [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link.active { background-color: var(--app-sidebar-active-bg, rgba(var(--bs-primary-rgb, 13,110,253), .12)) !important; color: var(--app-sidebar-active-color, var(--bs-primary)) !important; } [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link.active .menu-title, [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link.active .menu-icon, [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link.active .menu-icon .svg-icon, [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link.active .menu-icon i { color: var(--app-sidebar-active-color, var(--bs-primary)) !important; } [data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item .menu-link.active .menu-bullet .bullet { background-color: var(--app-sidebar-active-color, var(--bs-primary)) !important; } /* Ensure header/toolbar in dark mode pick scheme background instead of hardcoded black */ html[data-bs-theme="dark"][data-color-scheme] .app-header, html[data-bs-theme="dark"][data-color-scheme] .app-toolbar { background-color: var(--bs-app-header-base-bg-color) !important; } /* Metronic menu dropdowns (used by search/preferences) should reflect scheme */ .menu.menu-sub.menu-sub-dropdown { background-color: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); } /* Default icon buttons should inherit scheme-muted color */ html[data-color-scheme] .btn.btn-icon, html[data-color-scheme] .btn.btn-icon i, html[data-color-scheme] .btn.btn-icon .svg-icon, html[data-color-scheme] .btn.btn-icon-muted i, html[data-color-scheme] .btn.btn-icon-muted .svg-icon { color: var(--bs-text-muted) !important; } /* Light utility palette aligned to scheme */ --bs-light: #e7eaf0; --bs-light-rgb: 231, 234, 240; --bs-light-inverse: var(--bs-body-color); /* Gray text tokens used by text-gray-* utilities */ --bs-text-gray-400: rgba(var(--bs-body-color-rgb), 0.5); --bs-text-gray-500: rgba(var(--bs-body-color-rgb), 0.65); --bs-text-gray-600: rgba(var(--bs-body-color-rgb), 0.75); /* Light utility palette aligned to scheme (dark surface) */ --bs-light: #2a2b3d; --bs-light-rgb: 42, 43, 61; --bs-light-inverse: var(--bs-body-color); /* Gray text tokens used by text-gray-* utilities */ --bs-text-gray-400: rgba(var(--bs-body-color-rgb), 0.5); --bs-text-gray-500: rgba(var(--bs-body-color-rgb), 0.65); --bs-text-gray-600: rgba(var(--bs-body-color-rgb), 0.8); --bs-light: #eef1f8; --bs-light-rgb: 238, 241, 248; --bs-light-inverse: var(--bs-body-color); --bs-text-gray-400: rgba(var(--bs-body-color-rgb), 0.5); --bs-text-gray-500: rgba(var(--bs-body-color-rgb), 0.65); --bs-text-gray-600: rgba(var(--bs-body-color-rgb), 0.75); --bs-light: #1f2030; --bs-light-rgb: 31, 32, 48; --bs-light-inverse: var(--bs-body-color); --bs-text-gray-400: rgba(var(--bs-body-color-rgb), 0.5); --bs-text-gray-500: rgba(var(--bs-body-color-rgb), 0.65); --bs-text-gray-600: rgba(var(--bs-body-color-rgb), 0.8); --bs-light: #edf1fb; --bs-light-rgb: 237, 241, 251; --bs-light-inverse: var(--bs-body-color); --bs-text-gray-400: rgba(var(--bs-body-color-rgb), 0.5); --bs-text-gray-500: rgba(var(--bs-body-color-rgb), 0.65); --bs-text-gray-600: rgba(var(--bs-body-color-rgb), 0.75); --bs-light: #202233; --bs-light-rgb: 32, 34, 51; --bs-light-inverse: var(--bs-body-color); --bs-text-gray-400: rgba(var(--bs-body-color-rgb), 0.5); --bs-text-gray-500: rgba(var(--bs-body-color-rgb), 0.65); --bs-text-gray-600: rgba(var(--bs-body-color-rgb), 0.8); --bs-light: #efe4b7; --bs-light-rgb: 239, 228, 183; --bs-light-inverse: var(--bs-body-color); --bs-text-gray-400: rgba(var(--bs-body-color-rgb), 0.5); --bs-text-gray-500: rgba(var(--bs-body-color-rgb), 0.65); --bs-text-gray-600: rgba(var(--bs-body-color-rgb), 0.75); --bs-light: #33302b; --bs-light-rgb: 51, 48, 43; --bs-light-inverse: var(--bs-body-color); --bs-text-gray-400: rgba(var(--bs-body-color-rgb), 0.5); --bs-text-gray-500: rgba(var(--bs-body-color-rgb), 0.65); --bs-text-gray-600: rgba(var(--bs-body-color-rgb), 0.8);