/** * ShopMaster Dark Mode Theme * * This file provides dark theme overrides using CSS custom properties. * Theme is activated by adding data-theme="dark" to the element. */ /* ======================================== DARK THEME VARIABLE OVERRIDES ======================================== */ [data-theme="dark"] { /* Primary Brand Colors - Slightly lighter for dark backgrounds */ --primary-50: #1e3a5f; --primary-100: #1e40af; --primary-200: #2563eb; --primary-300: #3b82f6; --primary-400: #60a5fa; --primary-500: #93c5fd; --primary-600: #3b82f6; --primary-700: #60a5fa; --primary-800: #93c5fd; --primary-900: #dbeafe; /* Neutral Colors - Inverted for dark mode */ --neutral-50: #0f172a; --neutral-100: #1e293b; --neutral-200: #334155; --neutral-300: #475569; --neutral-400: #64748b; --neutral-500: #94a3b8; --neutral-600: #cbd5e1; --neutral-700: #e2e8f0; --neutral-800: #f1f5f9; --neutral-900: #f8fafc; /* Success Colors - Adjusted for dark backgrounds */ --success-50: #052e16; --success-100: #14532d; --success-500: #22c55e; --success-600: #4ade80; --success-700: #86efac; /* Warning Colors - Adjusted for dark backgrounds */ --warning-50: #451a03; --warning-100: #78350f; --warning-500: #f59e0b; --warning-600: #fbbf24; --warning-700: #fcd34d; /* Error/Danger Colors - Adjusted for dark backgrounds */ --error-50: #450a0a; --error-100: #7f1d1d; --error-500: #ef4444; --error-600: #f87171; --error-700: #fca5a5; /* Semantic Colors - Dark theme */ --background: #0f172a; --surface: #1e293b; --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --border: #334155; --border-light: #1e293b; /* Enhanced Shadows for dark mode */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5); } /* ======================================== SMOOTH THEME TRANSITIONS ======================================== */ html { transition: background-color 0.3s ease; } body, .sidebar, .main-content, .modal, .modal-content, .metric-card, .dashboard-section, .table-container, .nav-user, .tab-content, .form-group input, .form-group select, .form-group textarea, .search-bar input, .autocomplete-suggestions, .info-box, .sale-item, .profit-card { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ======================================== DARK MODE SPECIFIC OVERRIDES ======================================== */ /* Sidebar in dark mode */ [data-theme="dark"] .sidebar { background: #0f172a; border-right-color: #334155; } [data-theme="dark"] .nav-brand { border-bottom-color: #334155; } [data-theme="dark"] .sidebar-title { color: #f8fafc; } [data-theme="dark"] .nav-btn { color: #cbd5e1; } [data-theme="dark"] .nav-btn:hover { background-color: #1e293b; color: #93c5fd; } [data-theme="dark"] .nav-btn.active { background-color: #1e3a5f; color: #93c5fd; border-right-color: #3b82f6; } [data-theme="dark"] .nav-section-label { color: #64748b; } [data-theme="dark"] .nav-user { background: #1e293b; border-top-color: #334155; } [data-theme="dark"] .nav-user-name { color: #f8fafc; } [data-theme="dark"] .nav-user-role { color: #94a3b8; } [data-theme="dark"] .nav-user-avatar { background: #1e3a5f; color: #93c5fd; border-color: #334155; } /* Main Content Area */ [data-theme="dark"] .main-content { background: #0f172a; } [data-theme="dark"] .tab-content { background: #0f172a; } [data-theme="dark"] .tab-header h2 { color: #f8fafc; } /* Dashboard Cards */ [data-theme="dark"] .metric-card { background: #1e293b; border-color: #334155; } [data-theme="dark"] .metric-card:hover { border-color: #475569; } [data-theme="dark"] .metric-card h3 { color: #94a3b8; } [data-theme="dark"] .metric-value { background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .metric-card.alert .metric-value { background: linear-gradient(135deg, #f87171 0%, #fca5a5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .dashboard-section { background: #1e293b; border-color: #334155; } [data-theme="dark"] .dashboard-section h3 { color: #f8fafc; } /* Tables */ [data-theme="dark"] .table-container { background: #1e293b; border-color: #334155; } [data-theme="dark"] thead { background: #0f172a; } [data-theme="dark"] th { color: #94a3b8; border-bottom-color: #334155; } [data-theme="dark"] th.sortable:hover { background: #334155; color: #93c5fd; } [data-theme="dark"] td { color: #e2e8f0; border-bottom-color: #334155; } [data-theme="dark"] tbody tr:hover { background: #334155; } /* Forms and Inputs */ [data-theme="dark"] .form-group label { color: #cbd5e1; } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background: #0f172a; border-color: #334155; color: #f8fafc; } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group select:focus, [data-theme="dark"] .form-group textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } [data-theme="dark"] .form-group input::placeholder { color: #64748b; } [data-theme="dark"] .search-bar input { background: #1e293b; border-color: #334155; color: #f8fafc; } /* Modals */ [data-theme="dark"] .modal { background: #1e293b; } [data-theme="dark"] .modal-content h2 { color: #f8fafc; } [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7); } /* Info Box and Sale Items */ [data-theme="dark"] .info-box { background: #0f172a; border-color: #334155; } [data-theme="dark"] .info-box p { color: #cbd5e1; } [data-theme="dark"] .sale-item { background: #0f172a; } [data-theme="dark"] .sale-item select, [data-theme="dark"] .sale-item input { background: #1e293b; border-color: #334155; color: #f8fafc; } [data-theme="dark"] .item-subtotal { color: #93c5fd; } [data-theme="dark"] .sale-total { border-top-color: #334155; } [data-theme="dark"] .sale-total h3 { color: #93c5fd; } /* Autocomplete Suggestions */ [data-theme="dark"] .autocomplete-suggestions { background: #1e293b; border-color: #334155; } [data-theme="dark"] .suggestion-item { border-bottom-color: #334155; } [data-theme="dark"] .suggestion-item:hover { background: #334155; } [data-theme="dark"] .suggestion-name { color: #f8fafc; } [data-theme="dark"] .suggestion-details { color: #94a3b8; } /* Alert Items */ [data-theme="dark"] .alert-item, [data-theme="dark"] .recent-item { border-bottom-color: #334155; color: #e2e8f0; } [data-theme="dark"] .alert-item.critical { background: #450a0a; border-left-color: #ef4444; } /* Status Badges - Keep vibrant for visibility */ [data-theme="dark"] .status-badge.low-stock { background: #7f1d1d; color: #fca5a5; } [data-theme="dark"] .status-badge.in-stock { background: #14532d; color: #86efac; } [data-theme="dark"] .status-badge.pending { background: #78350f; color: #fcd34d; } [data-theme="dark"] .status-badge.approved, [data-theme="dark"] .status-badge.completed { background: #14532d; color: #86efac; } [data-theme="dark"] .status-badge.rejected { background: #7f1d1d; color: #fca5a5; } /* Sub-Navigation Tabs */ [data-theme="dark"] .sub-nav-tabs { background-color: #1e293b; border-color: #334155; } [data-theme="dark"] .sub-nav-btn { color: #94a3b8; } [data-theme="dark"] .sub-nav-btn:hover { color: #93c5fd; background-color: #334155; } [data-theme="dark"] .sub-nav-btn.active { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; } /* Profit Cards */ [data-theme="dark"] .profit-card { background: #1e293b; border-color: #334155; } [data-theme="dark"] .profit-card h3 { color: #94a3b8; } [data-theme="dark"] .profit-value { color: #f8fafc; } [data-theme="dark"] .profit-subtitle { color: #64748b; } /* Demo credentials box */ [data-theme="dark"] .demo-credentials { background: #1e293b; border-left-color: #3b82f6; } [data-theme="dark"] .demo-credentials p { color: #cbd5e1; } [data-theme="dark"] .demo-credentials strong { color: #f8fafc; } /* Empty state */ [data-theme="dark"] .empty-state { color: #64748b; } /* Mobile Menu Button */ [data-theme="dark"] .mobile-menu-btn { background: #1e293b; } /* Scrollbar styling for dark mode */ [data-theme="dark"] .nav-menu::-webkit-scrollbar-thumb { background: #475569; } /* ======================================== THEME TOGGLE BUTTON STYLES ======================================== */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--neutral-100); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; color: var(--text-secondary); } .theme-toggle-btn:hover { background: var(--neutral-200); color: var(--text-primary); transform: scale(1.05); } .theme-toggle-btn:active { transform: scale(0.95); } .theme-toggle-btn svg { width: 20px; height: 20px; } /* Show/hide sun/moon icons based on theme */ .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } [data-theme="dark"] .theme-icon-sun { display: block; } [data-theme="dark"] .theme-icon-moon { display: none; } /* Theme toggle wrapper in sidebar user section */ .theme-toggle-wrapper { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); } .theme-toggle-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }