/** * MarktLinse Design System - Dark Theme * Version: 1.0.0 * * Dark theme for the MarktLinse application. * Inverted color scheme with adjusted Glassmorphism effects. */ [data-theme="dark"] { /* ============================================ * BACKGROUND COLORS * ============================================ */ --bg-primary: var(--gray-900); --bg-secondary: var(--gray-800); --bg-tertiary: var(--gray-700); --bg-inverse: var(--color-white); /* Surface Colors (for cards, modals, etc.) */ --surface-primary: var(--gray-800); --surface-secondary: var(--gray-700); --surface-elevated: #1e1e1e; /* ============================================ * TEXT COLORS * ============================================ */ --text-primary: var(--gray-50); --text-secondary: var(--gray-300); --text-tertiary: var(--gray-400); --text-muted: var(--gray-500); --text-inverse: var(--gray-800); --text-link: var(--color-turquoise); --text-link-hover: var(--color-primary-dark); /* ============================================ * BORDER COLORS * ============================================ */ --border-primary: var(--gray-700); --border-secondary: var(--gray-600); --border-focus: var(--color-turquoise); --border-error: var(--color-danger); /* ============================================ * GLASSMORPHISM (Dark Mode) * ============================================ */ --glass-bg: rgba(30, 30, 30, 0.8); --glass-bg-hover: rgba(40, 40, 40, 0.9); --glass-border: 1px solid rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* ============================================ * COMPONENT COLORS * ============================================ */ /* Buttons - Primary */ --button-primary-bg: var(--gradient-primary); --button-primary-bg-hover: var(--gradient-primary-hover); --button-primary-text: var(--color-white); --button-primary-shadow: 0 4px 14px 0 rgba(0, 184, 217, 0.3); /* Buttons - Secondary */ --button-secondary-bg: var(--gray-800); --button-secondary-bg-hover: var(--gray-700); --button-secondary-text: var(--color-turquoise); --button-secondary-border: 1px solid var(--color-turquoise); /* Buttons - Ghost */ --button-ghost-bg: transparent; --button-ghost-bg-hover: rgba(0, 184, 217, 0.1); --button-ghost-text: var(--color-turquoise); /* Buttons - Danger */ --button-danger-bg: var(--color-danger); --button-danger-bg-hover: var(--color-danger-dark); --button-danger-text: var(--color-white); /* Inputs */ --input-bg: var(--gray-800); --input-bg-disabled: var(--gray-700); --input-text: var(--text-primary); --input-placeholder: var(--gray-500); --input-border: var(--gray-600); --input-border-hover: var(--gray-500); --input-border-focus: var(--color-turquoise); --input-border-error: var(--color-danger); /* Cards */ --card-bg: var(--gray-800); --card-border: var(--glass-border); --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); /* Modal */ --modal-bg: var(--gray-800); --modal-backdrop: rgba(0, 0, 0, 0.7); --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Toast */ --toast-bg: var(--gray-800); --toast-border: var(--glass-border); --toast-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4); /* Toast Variants */ --toast-success-bg: rgba(16, 185, 129, 0.15); --toast-success-border: var(--color-success); --toast-success-text: #34d399; --toast-warning-bg: rgba(245, 158, 11, 0.15); --toast-warning-border: var(--color-warning); --toast-warning-text: #fbbf24; --toast-danger-bg: rgba(239, 68, 68, 0.15); --toast-danger-border: var(--color-danger); --toast-danger-text: #f87171; --toast-info-bg: rgba(59, 130, 246, 0.15); --toast-info-border: var(--color-info); --toast-info-text: #60a5fa; /* ============================================ * SCROLLBAR (Dark Mode) * ============================================ */ --scrollbar-track: var(--gray-800); --scrollbar-thumb: var(--gray-600); --scrollbar-thumb-hover: var(--gray-500); /* ============================================ * SELECTION * ============================================ */ --selection-bg: rgba(0, 184, 217, 0.3); --selection-text: var(--text-primary); /* ============================================ * FOCUS RING * ============================================ */ --focus-ring-color: rgba(0, 184, 217, 0.5); --focus-ring-offset: 2px; --focus-ring-width: 3px; /* ============================================ * DIVIDERS * ============================================ */ --divider-color: var(--gray-700); --divider-color-subtle: var(--gray-800); /* ============================================ * OVERLAY * ============================================ */ --overlay-light: rgba(255, 255, 255, 0.1); --overlay-dark: rgba(0, 0, 0, 0.7); /* ============================================ * STATUS COLORS * ============================================ */ --status-online: #34d399; --status-offline: var(--gray-500); --status-busy: #f87171; --status-away: #fbbf24; } /* ============================================ * GLOBAL STYLES FOR DARK THEME * ============================================ */ [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] body { background-color: var(--bg-primary); color: var(--text-primary); } /* Selection Styling */ [data-theme="dark"] ::selection { background-color: var(--selection-bg); color: var(--selection-text); } /* Scrollbar Styling (WebKit) */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: var(--radius-full); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Focus Ring Utility */ [data-theme="dark"] .focus-ring:focus { outline: none; box-shadow: 0 0 0 var(--focus-ring-offset) var(--bg-primary), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); } /* Glassmorphic Surface */ [data-theme="dark"] .glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); box-shadow: var(--glass-shadow); } [data-theme="dark"] .glass:hover { background: var(--glass-bg-hover); } /* Image and SVG adjustments for dark mode */ [data-theme="dark"] img:not([data-no-invert]) { /* Slightly reduce brightness for images */ filter: brightness(0.9); } /* Code blocks in dark mode */ [data-theme="dark"] pre, [data-theme="dark"] code { background-color: var(--gray-900); border-color: var(--gray-700); }