/** * Dark Mode CSS - rechnung.best * * Apple-inspired dark theme with professional colors * Overrides unified-tokens.css variables with dark mode variants * * Applied via data-theme attribute on element: * - html[data-theme="dark"] - Manual dark mode * - html[data-theme="auto"] + @media (prefers-color-scheme: dark) - System dark mode * * Priority: data-theme > @media (prefers-color-scheme) * * @date 2026-01-04 * @version 1.0.0 */ /* ======================================== DARK MODE - Manual Selection ======================================== */ html[data-theme="dark"] { /* Backgrounds - Apple Dark Mode Inspired */ --rb-bg-primary: #1C1C1E; --rb-bg-secondary: #2C2C2E; --rb-bg-tertiary: #3A3A3C; --rb-bg-elevated: #2C2C2E; /* Text Colors */ --rb-text-primary: #F5F5F7; --rb-text-secondary: #A1A1A6; --rb-text-muted: #636366; --rb-text-inverse: #1C1C1E; /* Borders */ --rb-border-light: #3A3A3C; --rb-border-default: #48484A; --rb-border-focus: #0A84FF; /* Grays - Inverted Apple Scale */ --rb-gray-50: #1C1C1E; --rb-gray-100: #2C2C2E; --rb-gray-200: #3A3A3C; --rb-gray-300: #48484A; --rb-gray-400: #636366; --rb-gray-500: #8E8E93; --rb-gray-600: #A1A1A6; --rb-gray-700: #C7C7CC; --rb-gray-800: #D1D1D6; --rb-gray-900: #F5F5F7; /* Primary Color - iOS Blue in Dark Mode */ --rb-primary: #0A84FF; --rb-primary-hover: #409CFF; --rb-primary-active: #0070E0; --rb-primary-light: rgba(10, 132, 255, 0.12); /* Semantic Colors - Dark Mode Variants */ --rb-success: #30D158; --rb-warning: #FF9F0A; --rb-danger: #FF453A; --rb-info: #64D2FF; /* Shadows - Lighter for dark backgrounds */ --rb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --rb-shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --rb-shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.3); --rb-shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.6), 0 10px 20px -5px rgba(0, 0, 0, 0.3); /* Material Design 3 Dark Mode Colors */ --md-sys-color-primary: #8cc8ff; --md-sys-color-on-primary: #003355; --md-sys-color-surface: #101418; --md-sys-color-on-surface: #e2e2e9; --md-sys-color-background: #101418; --md-sys-color-on-background: #e2e2e9; } /* ======================================== AUTO MODE - System Preference Dark ======================================== */ @media (prefers-color-scheme: dark) { html[data-theme="auto"] { /* Apply same dark mode variables */ --rb-bg-primary: #1C1C1E; --rb-bg-secondary: #2C2C2E; --rb-bg-tertiary: #3A3A3C; --rb-bg-elevated: #2C2C2E; --rb-text-primary: #F5F5F7; --rb-text-secondary: #A1A1A6; --rb-text-muted: #636366; --rb-text-inverse: #1C1C1E; --rb-border-light: #3A3A3C; --rb-border-default: #48484A; --rb-border-focus: #0A84FF; --rb-gray-50: #1C1C1E; --rb-gray-100: #2C2C2E; --rb-gray-200: #3A3A3C; --rb-gray-300: #48484A; --rb-gray-400: #636366; --rb-gray-500: #8E8E93; --rb-gray-600: #A1A1A6; --rb-gray-700: #C7C7CC; --rb-gray-800: #D1D1D6; --rb-gray-900: #F5F5F7; --rb-primary: #0A84FF; --rb-primary-hover: #409CFF; --rb-primary-active: #0070E0; --rb-primary-light: rgba(10, 132, 255, 0.12); --rb-success: #30D158; --rb-warning: #FF9F0A; --rb-danger: #FF453A; --rb-info: #64D2FF; --rb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --rb-shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --rb-shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.3); --rb-shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.6), 0 10px 20px -5px rgba(0, 0, 0, 0.3); --md-sys-color-primary: #8cc8ff; --md-sys-color-on-primary: #003355; --md-sys-color-surface: #101418; --md-sys-color-on-surface: #e2e2e9; --md-sys-color-background: #101418; --md-sys-color-on-background: #e2e2e9; } } /* ======================================== COMPONENT-SPECIFIC ADJUSTMENTS ======================================== */ /* Cards */ html[data-theme="dark"] .card, html[data-theme="auto"] .card { background: var(--rb-bg-secondary); border-color: var(--rb-border-default); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] .card { background: var(--rb-bg-secondary); border-color: var(--rb-border-default); } } /* Form Elements */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--rb-bg-tertiary); color: var(--rb-text-primary); border-color: var(--rb-border-default); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] input, html[data-theme="auto"] select, html[data-theme="auto"] textarea { background: var(--rb-bg-tertiary); color: var(--rb-text-primary); border-color: var(--rb-border-default); } } /* Focus States */ html[data-theme="dark"] *:focus-visible { outline-color: var(--rb-primary); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] *:focus-visible { outline-color: var(--rb-primary); } } /* Tables */ html[data-theme="dark"] table { background: var(--rb-bg-secondary); color: var(--rb-text-primary); } html[data-theme="dark"] th { background: var(--rb-bg-tertiary); color: var(--rb-text-primary); border-color: var(--rb-border-default); } html[data-theme="dark"] td { border-color: var(--rb-border-light); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] table { background: var(--rb-bg-secondary); color: var(--rb-text-primary); } html[data-theme="auto"] th { background: var(--rb-bg-tertiary); color: var(--rb-text-primary); border-color: var(--rb-border-default); } html[data-theme="auto"] td { border-color: var(--rb-border-light); } } /* Modals & Dropdowns */ html[data-theme="dark"] .modal-dialog, html[data-theme="dark"] .dropdown-menu { background: var(--rb-bg-secondary); border-color: var(--rb-border-default); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] .modal-dialog, html[data-theme="auto"] .dropdown-menu { background: var(--rb-bg-secondary); border-color: var(--rb-border-default); } } /* Invoices & Printable Content - Keep Light */ html[data-theme="dark"] .invoice-preview, html[data-theme="dark"] .pdf-preview { background: white !important; color: black !important; } @media (prefers-color-scheme: dark) { html[data-theme="auto"] .invoice-preview, html[data-theme="auto"] .pdf-preview { background: white !important; color: black !important; } } /* Glassmorphism Adjustments for Dark Mode */ html[data-theme="dark"] .glass-card { background: rgba(44, 44, 46, 0.72); backdrop-filter: saturate(180%) blur(20px); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] .glass-card { background: rgba(44, 44, 46, 0.72); backdrop-filter: saturate(180%) blur(20px); } }