/* * ERP brand theme overrides. * Loaded after style.bundle.css (see Master.cshtml) so these values win. * Metronic exposes its whole palette as CSS custom properties, so a full * re-skin only needs var overrides here - no SASS rebuild required. */ :root { /* Bootstrap-level primary (buttons, links, form focus, .text-primary/.bg-primary) */ --bs-primary: #4F46E5; --bs-primary-rgb: 79, 70, 229; --bs-primary-text-emphasis: #4338CA; --bs-primary-bg-subtle: #EEF2FF; --bs-primary-border-subtle: #C7D2FE; /* Metronic component-level primary (sidebar active state, badges, nav, checkboxes) */ --kt-primary: #4F46E5; --kt-primary-active: #4338CA; --kt-primary-light: #EEF2FF; --kt-primary-inverse: #ffffff; --kt-primary-rgb: 79, 70, 229; /* Slightly crisper corners than the stock demo */ --kt-card-border-radius: 0.65rem; --bs-border-radius: 0.5rem; --bs-border-radius-lg: 0.65rem; } /* * Background theme picker - 5 user-chosen palettes instead of a plain * light/dark toggle (see Areas/Admin/Views/Partials/ThemeMode/_BgSwatcher.cshtml * and assets/js/custom/global/bg-theme-switcher.js). Metronic still drives * dark-mode component styling off [data-theme=dark] on (see * Areas/Admin/Views/Partials/ThemeMode/_Init.cshtml) - NOT Bootstrap's * [data-bs-theme], which this project doesn't set - so every swatch also * sets data-theme to dark or light and this file layers surface colors * for the chosen swatch on top of Metronic's base dark/light styling. */ /* ---- Dark base: shared component fix-up for all 4 dark swatches ---- */ [data-theme=dark] { /* Neutral cool gray ramp (GitHub Dark-inspired) - replaces Metronic's stock indigo-tinted grays so every component built on --kt-gray-*/--bs-gray-* (borders, subtle backgrounds, muted text, table stripes) reads as true neutral gray under any dark swatch, not tinted toward any one swatch's hue */ --kt-gray-100: #161b22; --kt-gray-200: #21262d; --kt-gray-300: #30363d; --kt-gray-400: #484f58; --kt-gray-500: #6e7681; --kt-gray-600: #8b949e; --kt-gray-700: #adbac7; --kt-gray-800: #cdd9e5; --kt-gray-900: #f0f6fc; --bs-gray-100: #161b22; --bs-gray-200: #21262d; --bs-gray-300: #30363d; --bs-gray-400: #484f58; --bs-gray-500: #6e7681; --bs-gray-600: #8b949e; --bs-gray-700: #adbac7; --bs-gray-800: #cdd9e5; --bs-gray-900: #f0f6fc; /* light/secondary/dark tokens back badges, bg-light, table headers */ --kt-light: #21262d; --kt-light-active: #30363d; --kt-light-inverse: #adbac7; --kt-light-rgb: 33, 38, 45; --kt-secondary: #30363d; --kt-secondary-active: #484f58; --kt-secondary-inverse: #cdd9e5; --kt-secondary-rgb: 48, 54, 61; --bs-secondary: #30363d; --kt-dark: #f0f6fc; --kt-dark-active: #ffffff; --kt-dark-light: #21262d; --kt-dark-inverse: #161b22; --kt-dark-rgb: 240, 246, 252; --bs-dark: #f0f6fc; } [data-theme=dark] .card { box-shadow: 0 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.25); } /* ---- Per-swatch surfaces ---- */ /* Midnight (default dark) - GitHub Dark-style near-black, the single most widely used dark UI color today */ [data-bg-theme=midnight] { --kt-app-bg-color: #090c10; --kt-app-blank-bg-color: #090c10; --kt-body-bg: #0d1117; --bs-body-bg: #0d1117; --bs-body-bg-rgb: 13, 17, 23; --kt-app-header-base-bg-color: #0d1117; --kt-app-header-base-bg-color-mobile: #0d1117; --kt-app-toolbar-base-bg-color: #161b22; --kt-app-toolbar-base-bg-color-mobile: #161b22; --kt-app-footer-bg-color: #0d1117; --kt-app-footer-bg-color-mobile: #0d1117; --kt-app-sidebar-light-bg-color: #0d1117; --kt-card-bg: #161b22; --bs-body-color: #e6edf3; --bs-body-color-rgb: 230, 237, 243; --bs-heading-color: #f0f6fc; --bs-border-color: #30363d; --kt-text-muted: #8b949e; --kt-primary-light: #1c2140; --bs-primary-bg-subtle: #1c2140; } /* Charcoal - VS Code-style neutral dark gray, the other most widely used dark UI color */ [data-bg-theme=charcoal] { --kt-app-bg-color: #171717; --kt-app-blank-bg-color: #171717; --kt-body-bg: #1e1e1e; --bs-body-bg: #1e1e1e; --bs-body-bg-rgb: 30, 30, 30; --kt-app-header-base-bg-color: #1e1e1e; --kt-app-header-base-bg-color-mobile: #1e1e1e; --kt-app-toolbar-base-bg-color: #252526; --kt-app-toolbar-base-bg-color-mobile: #252526; --kt-app-footer-bg-color: #1e1e1e; --kt-app-footer-bg-color-mobile: #1e1e1e; --kt-app-sidebar-light-bg-color: #1e1e1e; --kt-card-bg: #252526; --bs-body-color: #cccccc; --bs-body-color-rgb: 204, 204, 204; --bs-heading-color: #ffffff; --bs-border-color: #3a3a3a; --kt-text-muted: #9d9d9d; --kt-primary-light: #23213a; --bs-primary-bg-subtle: #23213a; } /* Slate - a cool dark gray-blue */ [data-bg-theme=slate] { --kt-app-bg-color: #10131a; --kt-app-blank-bg-color: #10131a; --kt-body-bg: #14181f; --bs-body-bg: #14181f; --bs-body-bg-rgb: 20, 24, 31; --kt-app-header-base-bg-color: #14181f; --kt-app-header-base-bg-color-mobile: #14181f; --kt-app-toolbar-base-bg-color: #1c212b; --kt-app-toolbar-base-bg-color-mobile: #1c212b; --kt-app-footer-bg-color: #14181f; --kt-app-footer-bg-color-mobile: #14181f; --kt-app-sidebar-light-bg-color: #14181f; --kt-card-bg: #1c212b; --bs-body-color: #eef1f6; --bs-body-color-rgb: 238, 241, 246; --bs-heading-color: #ffffff; --bs-border-color: #2a3140; --kt-text-muted: #8b95a5; --kt-primary-light: #1c2340; --bs-primary-bg-subtle: #1c2340; } /* Indigo Night - dark, tinted with the brand primary */ [data-bg-theme=indigo] { --kt-app-bg-color: #120f20; --kt-app-blank-bg-color: #120f20; --kt-body-bg: #171426; --bs-body-bg: #171426; --bs-body-bg-rgb: 23, 20, 38; --kt-app-header-base-bg-color: #171426; --kt-app-header-base-bg-color-mobile: #171426; --kt-app-toolbar-base-bg-color: #1f1b35; --kt-app-toolbar-base-bg-color-mobile: #1f1b35; --kt-app-footer-bg-color: #171426; --kt-app-footer-bg-color-mobile: #171426; --kt-app-sidebar-light-bg-color: #171426; --kt-card-bg: #1f1b35; --bs-body-color: #ece9fb; --bs-body-color-rgb: 236, 233, 251; --bs-heading-color: #ffffff; --bs-border-color: #2c2650; --kt-text-muted: #9089b5; --kt-primary-light: #2c2456; --bs-primary-bg-subtle: #2c2456; } /* Snow (light) - a crisp near-white, close to Metronic's stock light mode */ [data-bg-theme=snow] { --kt-app-bg-color: #eef1f6; --kt-app-blank-bg-color: #eef1f6; --kt-body-bg: #f8f9fb; --bs-body-bg: #f8f9fb; --bs-body-bg-rgb: 248, 249, 251; --kt-app-header-base-bg-color: #f8f9fb; --kt-app-header-base-bg-color-mobile: #f8f9fb; --kt-app-footer-bg-color: #f8f9fb; --kt-app-footer-bg-color-mobile: #f8f9fb; --kt-card-bg: #ffffff; --bs-body-color: #1a1d29; --bs-border-color: #e4e7ee; --kt-text-muted: #6d7485; } /* ---- Swatch picker UI ---- */ .bg-swatch-dot { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(127, 127, 127, 0.35); } .bg-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(127, 127, 127, 0.35); padding: 0; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .bg-swatch:hover { transform: scale(1.12); } .bg-swatch.bg-swatch-active { box-shadow: 0 0 0 2px var(--kt-card-bg, #ffffff), 0 0 0 4px var(--kt-primary); } /* ---- Density: tighter spacing for data-heavy ERP screens ---- */ .card-header { min-height: 56px; } .card-body { padding-top: 1.5rem; padding-bottom: 1.5rem; } .table > :not(caption) > * > * { padding-top: 0.65rem; padding-bottom: 0.65rem; } /* ---- Polish ---- */ .card { box-shadow: 0 0.1rem 1rem 0.1rem rgba(0, 0, 0, 0.04); } .btn-primary { --bs-btn-bg: var(--kt-primary); --bs-btn-border-color: var(--kt-primary); --bs-btn-hover-bg: var(--kt-primary-active); --bs-btn-hover-border-color: var(--kt-primary-active); --bs-btn-active-bg: var(--kt-primary-active); --bs-btn-active-border-color: var(--kt-primary-active); } .badge.badge-light-primary { color: var(--kt-primary); background-color: var(--kt-primary-light); }