/** * Theme Variables CSS * Zentrale CSS-Variablen fuer Dark und Light Mode * Wird von data-bs-theme Attribut auf gesteuert */ /* ============================================ DARK THEME ============================================ */ [data-bs-theme="dark"] { /* Backgrounds */ --bg-primary: #0a0a0f; --bg-secondary: rgba(255, 255, 255, 0.08); --bg-secondary-glow: rgba(245, 158, 11, 0.2); --bg-card: rgba(255, 255, 255, 0.10); --bg-card-hover: rgba(255, 255, 255, 0.15); --bg-surface: rgba(255, 255, 255, 0.04); --bg-surface-hover: rgba(255, 255, 255, 0.08); --bg-body: #0a0a0f; --bg-page: transparent; /* Accent Colors (shared) */ --accent-primary: #6366f1; --accent-secondary: #8b5cf6; --accent-glow: rgba(99, 102, 241, 0.15); /* Status Colors (shared) */ --status-green: #10b981; --status-green-glow: rgba(16, 185, 129, 0.2); --status-yellow: #f59e0b; --status-yellow-glow: rgba(245, 158, 11, 0.2); --status-red: #ef4444; --status-red-glow: rgba(239, 68, 68, 0.2); --status-blue: #3b82f6; --status-blue-glow: rgba(59, 130, 246, 0.2); /* Text Colors */ --text-primary: #f8fafc; --text-secondary: rgb(203, 210, 219); --text-muted: #a3a8af; --text-heading: #f8fafc; --text-link: #6ea8fe; --text-on-accent: #ffffff; /* Borders */ --border-color: rgba(255, 255, 255, 0.10); --border-color-strong: rgba(255, 255, 255, 0.20); --border-glow: rgba(99, 102, 241, 0.3); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 40px var(--accent-glow); /* Inputs / Forms */ --input-bg: rgba(0, 0, 0, 0.25); --input-bg-focus: rgba(0, 0, 0, 0.35); --input-border: rgba(255, 255, 255, 0.12); --input-border-focus: #86b7fe; --input-color: #e0e0e0; --input-placeholder: rgba(255, 255, 255, 0.35); /* Cards */ --card-bg: var(--bg-card); --card-border: var(--border-color); --card-header-bg: rgba(255, 255, 255, 0.05); --card-shadow: var(--shadow-sm); /* Modals */ --modal-bg: #1a1a2e; --modal-border: rgba(255, 255, 255, 0.10); --modal-header-bg: rgba(255, 255, 255, 0.05); --modal-backdrop: rgba(0, 0, 0, 0.7); /* Dropdowns */ --dropdown-bg: #1e1e2e; --dropdown-border: rgba(255, 255, 255, 0.10); --dropdown-hover: rgba(255, 255, 255, 0.08); --dropdown-color: #e0e0e0; /* Tables */ --table-bg: transparent; --table-border: rgba(255, 255, 255, 0.06); --table-hover: rgba(255, 255, 255, 0.04); --table-stripe: rgba(255, 255, 255, 0.02); --table-header-bg: rgba(255, 255, 255, 0.05); --table-header-color: var(--text-muted); /* Sidebar */ --sidebar-bg: rgba(10, 10, 15, 0.95); --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-item-hover: rgba(255, 255, 255, 0.06); --sidebar-item-active: rgba(255, 255, 255, 0.10); --sidebar-text: rgba(255, 255, 255, 0.7); --sidebar-text-active: #ffffff; /* Nav */ --nav-tab-color: var(--text-muted); --nav-tab-active-color: var(--accent-primary); --nav-tab-active-bg: rgba(99, 102, 241, 0.1); --nav-tab-border: var(--border-color); /* Badges */ --badge-muted-bg: rgba(255, 255, 255, 0.08); --badge-muted-color: var(--text-muted); /* Scrollbar */ --scrollbar-track: rgba(255, 255, 255, 0.02); --scrollbar-thumb: rgba(255, 255, 255, 0.12); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2); /* Code */ --code-bg: rgba(0, 0, 0, 0.3); --code-color: #e2e8f0; /* Alert backgrounds */ --alert-info-bg: rgba(59, 130, 246, 0.1); --alert-info-border: rgba(59, 130, 246, 0.3); --alert-info-color: #93c5fd; --alert-success-bg: rgba(16, 185, 129, 0.1); --alert-success-border: rgba(16, 185, 129, 0.3); --alert-success-color: #6ee7b7; --alert-warning-bg: rgba(245, 158, 11, 0.1); --alert-warning-border: rgba(245, 158, 11, 0.3); --alert-warning-color: #fcd34d; --alert-danger-bg: rgba(239, 68, 68, 0.1); --alert-danger-border: rgba(239, 68, 68, 0.3); --alert-danger-color: #fca5a5; } /* ============================================ LIGHT THEME ============================================ */ [data-bs-theme="light"] { /* Backgrounds */ --bg-primary: #f5f7fa; --bg-secondary: #e9ecef; --bg-secondary-glow: rgba(245, 158, 11, 0.08); --bg-card: #ffffff; --bg-card-hover: #f8f9fa; --bg-surface: #f8f9fa; --bg-surface-hover: #e9ecef; --bg-body: #f5f7fa; --bg-page: #f5f7fa; /* Accent Colors (shared) */ --accent-primary: #4f46e5; --accent-secondary: #7c3aed; --accent-glow: rgba(79, 70, 229, 0.08); /* Status Colors (shared) */ --status-green: #059669; --status-green-glow: rgba(5, 150, 105, 0.1); --status-yellow: #d97706; --status-yellow-glow: rgba(217, 119, 6, 0.1); --status-red: #dc2626; --status-red-glow: rgba(220, 38, 38, 0.1); --status-blue: #2563eb; --status-blue-glow: rgba(37, 99, 235, 0.1); /* Text Colors */ --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #94a3b8; --text-heading: #0f172a; --text-link: #2563eb; --text-on-accent: #ffffff; /* Borders */ --border-color: #e2e8f0; --border-color-strong: #cbd5e1; --border-glow: rgba(79, 70, 229, 0.2); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 30px var(--accent-glow); /* Inputs / Forms */ --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-border: #cbd5e1; --input-border-focus: #6366f1; --input-color: #1e293b; --input-placeholder: #94a3b8; /* Cards */ --card-bg: #ffffff; --card-border: #e2e8f0; --card-header-bg: #f8f9fa; --card-shadow: var(--shadow-sm); /* Modals */ --modal-bg: #ffffff; --modal-border: #e2e8f0; --modal-header-bg: #f8f9fa; --modal-backdrop: rgba(0, 0, 0, 0.5); /* Dropdowns */ --dropdown-bg: #ffffff; --dropdown-border: #e2e8f0; --dropdown-hover: #f1f5f9; --dropdown-color: #1e293b; /* Tables */ --table-bg: #ffffff; --table-border: #e2e8f0; --table-hover: #f8fafc; --table-stripe: #f8f9fa; --table-header-bg: #f1f5f9; --table-header-color: #64748b; /* Sidebar */ --sidebar-bg: #ffffff; --sidebar-border: #e2e8f0; --sidebar-item-hover: #f1f5f9; --sidebar-item-active: #ede9fe; --sidebar-text: #64748b; --sidebar-text-active: #1e293b; /* Nav */ --nav-tab-color: #64748b; --nav-tab-active-color: #4f46e5; --nav-tab-active-bg: #ede9fe; --nav-tab-border: #e2e8f0; /* Badges */ --badge-muted-bg: #f1f5f9; --badge-muted-color: #64748b; /* Scrollbar */ --scrollbar-track: #f1f5f9; --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover: #94a3b8; /* Code */ --code-bg: #f1f5f9; --code-color: #334155; /* Alert backgrounds */ --alert-info-bg: #eff6ff; --alert-info-border: #bfdbfe; --alert-info-color: #1d4ed8; --alert-success-bg: #ecfdf5; --alert-success-border: #a7f3d0; --alert-success-color: #047857; --alert-warning-bg: #fffbeb; --alert-warning-border: #fde68a; --alert-warning-color: #b45309; --alert-danger-bg: #fef2f2; --alert-danger-border: #fecaca; --alert-danger-color: #b91c1c; } /* ============================================ AURA BACKGROUND VISIBILITY ============================================ */ [data-bs-theme="light"] .aura-bg { display: none !important; } [data-bs-theme="light"] body::after { display: none !important; }