/** * OptiGest360° Dark Theme v2.0 * Neutral dark palette — no blue tint * * Applied when [data-theme="dark"] is set on */ [data-theme="dark"] { color-scheme: dark; /* ============================================ NEUTRAL SCALE - Pure gray (no blue) ============================================ */ --ds-gray-50: #1c1c1e; --ds-gray-100: #2c2c2e; --ds-gray-200: #3a3a3c; --ds-gray-300: #48484a; --ds-gray-400: #636366; --ds-gray-500: #8e8e93; --ds-gray-600: #aeaeb2; --ds-gray-700: #d1d1d6; --ds-gray-800: #e5e5ea; --ds-gray-900: #f2f2f7; /* ============================================ ABSOLUTE COLORS ============================================ */ --ds-white: #141414; --ds-black: #f2f2f7; /* ============================================ PRIMARY - Brand color adjustments ============================================ */ --ds-primary: #7ea99c; --ds-primary-50: rgba(126, 169, 156, 0.08); --ds-primary-100: rgba(126, 169, 156, 0.15); --ds-primary-200: rgba(126, 169, 156, 0.25); --ds-primary-light: rgba(126, 169, 156, 0.15); /* ============================================ SEMANTIC COLORS ============================================ */ /* Success */ --ds-success-50: rgba(52, 199, 89, 0.08); --ds-success-100: rgba(52, 199, 89, 0.15); --ds-success-200: rgba(52, 199, 89, 0.22); --ds-success-light: rgba(52, 199, 89, 0.15); --ds-success-600: #34c759; /* Warning */ --ds-warning-50: rgba(255, 159, 10, 0.08); --ds-warning-100: rgba(255, 159, 10, 0.15); --ds-warning-200: rgba(255, 159, 10, 0.22); --ds-warning-light: rgba(255, 159, 10, 0.15); --ds-warning-600: #ff9f0a; /* Danger */ --ds-danger-50: rgba(255, 69, 58, 0.08); --ds-danger-100: rgba(255, 69, 58, 0.15); --ds-danger-200: rgba(255, 69, 58, 0.22); --ds-danger-light: rgba(255, 69, 58, 0.15); --ds-danger-600: #ff453a; /* Info */ --ds-info-50: rgba(10, 132, 255, 0.08); --ds-info-100: rgba(10, 132, 255, 0.15); --ds-info-200: rgba(10, 132, 255, 0.22); --ds-info-light: rgba(10, 132, 255, 0.15); --ds-info-600: #0a84ff; /* ============================================ TEXT COLORS ============================================ */ --ds-text-primary: #f2f2f7; --ds-text-secondary: #8e8e93; --ds-text-tertiary: #636366; --ds-text-muted: #48484a; --ds-text-disabled: #3a3a3c; --ds-text-inverse: #141414; /* ============================================ BACKGROUND COLORS ============================================ */ --ds-bg-primary: #141414; --ds-bg-secondary: #1c1c1e; --ds-bg-tertiary: #2c2c2e; --ds-bg-inverse: #f2f2f7; --ds-bg-overlay: rgba(0, 0, 0, 0.65); /* ============================================ BORDER COLORS ============================================ */ --ds-border-default: #3a3a3c; --ds-border-strong: #48484a; --ds-border-subtle: #2c2c2e; --ds-border-light: #2c2c2e; --ds-border-inverse: #141414; --ds-border-color: #3a3a3c; /* ============================================ STATUS COLORS ============================================ */ --ds-status-draft: #8e8e93; --ds-status-pending: #ff9f0a; --ds-status-approved: #34c759; --ds-status-rejected: #ff453a; --ds-status-archived: #636366; --ds-status-active: #0a84ff; /* ============================================ BOX SHADOWS ============================================ */ --ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3); --ds-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --ds-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --ds-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 10px 10px -5px rgba(0, 0, 0, 0.3); --ds-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3); --ds-shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.4); --ds-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6); /* ============================================ FORM ELEMENTS ============================================ */ --ds-input-bg: #1c1c1e; --ds-input-border: #3a3a3c; --ds-input-focus-border: #7ea99c; --ds-input-placeholder: #636366; /* ============================================ SIDEBAR ============================================ */ --sidebar-bg: #1c1c1e; --sidebar-border: #2c2c2e; --sidebar-text: #aeaeb2; --sidebar-text-active: #f2f2f7; --sidebar-hover-bg: #2c2c2e; --sidebar-active-bg: rgba(126, 169, 156, 0.12); --sidebar-icon: #636366; --sidebar-icon-active: #7ea99c; /* ============================================ HEADER ============================================ */ --header-bg: #1c1c1e; --header-border: #2c2c2e; /* ============================================ CARDS ============================================ */ --ds-card-bg: #1c1c1e; --ds-card-border: #2c2c2e; --ds-card-hover-bg: #2c2c2e; /* ============================================ STAT CARDS ============================================ */ --ds-stat-bg: #1c1c1e; --ds-stat-border: #2c2c2e; /* ============================================ TABLES ============================================ */ --ds-table-header-bg: #1c1c1e; --ds-table-row-hover: #2c2c2e; --ds-table-stripe: rgba(255, 255, 255, 0.02); --ds-table-border: #2c2c2e; /* ============================================ FILTER BAR ============================================ */ --ds-filter-bg: #1c1c1e; --ds-filter-border: #3a3a3c; /* ============================================ SCROLLBAR ============================================ */ --ds-scrollbar-track: #1c1c1e; --ds-scrollbar-thumb: #3a3a3c; --ds-scrollbar-thumb-hover: #48484a; } /* Scrollbar styling */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--ds-scrollbar-track); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ds-scrollbar-thumb); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--ds-scrollbar-thumb-hover); } /* Fix elements that use hardcoded colors */ [data-theme="dark"] .sidebar { background: var(--sidebar-bg); border-color: var(--sidebar-border); } [data-theme="dark"] .main-header { background: var(--header-bg); border-color: var(--header-border); } [data-theme="dark"] .ds-card { background: var(--ds-card-bg); border-color: var(--ds-card-border); } [data-theme="dark"] .ds-stat { background: var(--ds-stat-bg); border-color: var(--ds-stat-border); } [data-theme="dark"] .ds-filter-bar { background: var(--ds-bg-secondary); } [data-theme="dark"] .ds-data-table thead th { background: var(--ds-table-header-bg); } [data-theme="dark"] .ds-data-table tbody tr:hover { background: var(--ds-table-row-hover); } [data-theme="dark"] .ds-input, [data-theme="dark"] .ds-select, [data-theme="dark"] .ds-filter-dropdown__select { background: var(--ds-input-bg); border-color: var(--ds-input-border); color: var(--ds-text-primary); } [data-theme="dark"] .ds-modal__content { background: var(--ds-bg-secondary); } [data-theme="dark"] .ds-tabs__btn { color: var(--ds-text-secondary); } [data-theme="dark"] .ds-tabs__btn.is-active { color: var(--ds-primary); border-bottom-color: var(--ds-primary); } [data-theme="dark"] .ds-tabs__nav { border-bottom-color: var(--ds-border-default); } [data-theme="dark"] .ds-breadcrumb__link { color: var(--ds-text-secondary); } [data-theme="dark"] .ds-breadcrumb__link:hover { color: var(--ds-primary); } [data-theme="dark"] .notification-dropdown { background: var(--ds-bg-secondary); border-color: var(--ds-border-default); } [data-theme="dark"] .btn-icon { color: var(--ds-text-secondary); } [data-theme="dark"] .btn-icon:hover { background: var(--ds-bg-tertiary); color: var(--ds-text-primary); } /* Explicit header fix */ [data-theme="dark"] .header { background: #1c1c1e !important; border-bottom-color: #2c2c2e !important; } [data-theme="dark"] .header-left h2, [data-theme="dark"] .header-left h1 { color: var(--ds-text-primary) !important; }