/* ============================================ DateSpeed — "Dark" Theme Dark mode with muted accent colors Applied via [data-theme="dark"] on ============================================ */ [data-theme="dark"] { --ds-red: #FF4D6A; --ds-red-dark: #E8003D; --ds-red-light: #FF6B85; --ds-black: #121212; --ds-dark: #1E1E1E; --ds-gold: #FFD54F; --ds-white: #E0E0E0; --ds-light: #181818; --ds-gray: #9E9E9E; --ds-border: #333333; --bs-primary: #FF4D6A; --bs-primary-rgb: 255, 77, 106; --bs-secondary: #2C2C2C; --bs-secondary-rgb: 44, 44, 44; --bs-success: #4CAF50; --bs-warning: #FFD54F; --bs-warning-rgb: 255, 213, 79; --bs-danger: #EF5350; --bs-body-bg: #121212; --bs-body-color: #E0E0E0; --bs-link-color: #FF4D6A; --bs-link-hover-color: #FF6B85; --bs-border-radius: 0.5rem; } [data-theme="dark"] body { background-color: #121212; color: #E0E0E0; } /* ---- Dark: headings ---- */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #F5F5F5; } /* ---- Dark: navbar ---- */ [data-theme="dark"] .topnav.bg-blueme, [data-theme="dark"] .topnav { background-color: #1A1A1A !important; border-bottom: 3px solid var(--ds-red); } /* ---- Dark: cards ---- */ [data-theme="dark"] .card { background-color: #1E1E1E; border: 1px solid #333; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } [data-theme="dark"] .card:hover { box-shadow: 0 6px 24px rgba(255,77,106,0.15); } [data-theme="dark"] .card-body { color: #E0E0E0; } /* ---- Dark: forms ---- */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #2C2C2C; border-color: #444; color: #E0E0E0; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #333; border-color: var(--ds-red); color: #E0E0E0; box-shadow: 0 0 0 0.2rem rgba(255,77,106,0.2); } [data-theme="dark"] .form-control::placeholder { color: #888; } [data-theme="dark"] label.form-label, [data-theme="dark"] .form-label { color: #CCC; } [data-theme="dark"] .form-check-label { color: #CCC; } [data-theme="dark"] .form-check-input { border-color: #666; background-color: #2C2C2C; } [data-theme="dark"] .form-check-input:checked { background-color: var(--ds-red); border-color: var(--ds-red); } /* ---- Dark: buttons ---- */ [data-theme="dark"] .btn-primary { background-color: var(--ds-red); border-color: var(--ds-red); color: #fff; } [data-theme="dark"] .btn-primary:hover { background-color: var(--ds-red-dark); border-color: var(--ds-red-dark); } [data-theme="dark"] .btn-outline-primary { color: var(--ds-red); border-color: var(--ds-red); } [data-theme="dark"] .btn-outline-primary:hover { background-color: var(--ds-red); color: #fff; } [data-theme="dark"] .btn-outline-secondary { color: #AAA; border-color: #555; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #333; color: #E0E0E0; border-color: #777; } [data-theme="dark"] .btn-secondary { background-color: #333; border-color: #444; color: #E0E0E0; } [data-theme="dark"] .btn-warning { background-color: var(--ds-gold); border-color: var(--ds-gold); color: #1A1A1A; } /* ---- Dark: dropdown ---- */ [data-theme="dark"] .dropdown-menu { background-color: #2C2C2C; border: 1px solid #444; border-top: 3px solid var(--ds-red); } [data-theme="dark"] .dropdown-item { color: #E0E0E0; } [data-theme="dark"] .dropdown-item:hover { background-color: #3A3A3A; color: var(--ds-red); } [data-theme="dark"] .dropdown-divider { border-color: #444; } /* ---- Dark: list groups ---- */ [data-theme="dark"] .list-group-item { background-color: #1E1E1E; border-color: #333; color: #E0E0E0; } [data-theme="dark"] .list-group-item-action:hover { background-color: #2A2A2A; color: var(--ds-red); border-left: 3px solid var(--ds-red); } /* ---- Dark: tables ---- */ [data-theme="dark"] .table { color: #E0E0E0; } [data-theme="dark"] .table th { color: #AAA; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: #2A2A2A; } /* ---- Dark: alerts ---- */ [data-theme="dark"] .alert-warning { background-color: #3D3200; border-color: #665500; color: #FFD54F; } [data-theme="dark"] .alert-success { background-color: #1B3A1B; border-color: #2E5E2E; color: #81C784; } [data-theme="dark"] .alert-danger { background-color: #3A1B1B; border-color: #5E2E2E; color: #EF9A9A; } [data-theme="dark"] .alert-info { background-color: #1B2A3A; border-color: #2E4A5E; color: #90CAF9; } /* ---- Dark: backgrounds ---- */ [data-theme="dark"] .bg-lightblue { background-color: #1E1E1E !important; } [data-theme="dark"] .bg-blueme { background-color: #121212 !important; } [data-theme="dark"] .bg-light { background-color: #1E1E1E !important; } [data-theme="dark"] .bg-white { background-color: #1E1E1E !important; } /* ---- Dark: links ---- */ [data-theme="dark"] a { color: var(--ds-red); } [data-theme="dark"] a:hover { color: var(--ds-red-light); } /* ---- Dark: text ---- */ [data-theme="dark"] .text-muted { color: #999 !important; } [data-theme="dark"] .text-dark { color: #E0E0E0 !important; } /* ---- Dark: badges ---- */ [data-theme="dark"] .badge.bg-primary { background-color: var(--ds-red) !important; } [data-theme="dark"] .badge.bg-secondary { background-color: #444 !important; } [data-theme="dark"] .badge.bg-info { background-color: #1565C0 !important; color: #fff !important; } [data-theme="dark"] .badge.bg-warning { background-color: var(--ds-gold) !important; color: #1A1A1A !important; } /* ---- Dark: progress & scrollbar ---- */ [data-theme="dark"] .progress { background-color: #333; } [data-theme="dark"] .progress-bar { background-color: var(--ds-red); } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1E1E1E; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ds-red); } /* ---- Dark: chat bubbles ---- */ [data-theme="dark"] .border.rounded.bg-light { background-color: #1A1A1A !important; border-color: #333 !important; } [data-theme="dark"] .bg-white.border { background-color: #2C2C2C !important; border-color: #444 !important; color: #E0E0E0; } /* ---- Dark: modal ---- */ [data-theme="dark"] .modal-content { background-color: #2C2C2C; color: #E0E0E0; border-color: #444; } [data-theme="dark"] .modal-header { border-color: #444; } [data-theme="dark"] .modal-footer { border-color: #444; } /* ---- Dark: nav active ---- */ [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: var(--ds-red) !important; } [data-theme="dark"] .bottom-nav-item.active div { color: var(--ds-red) !important; } /* ---- Dark: swipe card ---- */ [data-theme="dark"] #swipe-card { background-color: #1E1E1E !important; } [data-theme="dark"] #swipe-like { color: var(--ds-red) !important; border-color: var(--ds-red) !important; } /* ---- Dark: dashboard stat ---- */ [data-theme="dark"] .card .display-6 { color: var(--ds-red); } /* ---- Dark: shadow overrides ---- */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm { box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } /* ---- Dark: footer ---- */ [data-theme="dark"] footer { border-top-color: #333 !important; color: #999; } /* ---- Dark: Blazor error ---- */ [data-theme="dark"] #blazor-error-ui { background: var(--ds-red); } /* ---- Dark: racing stripe ---- */ [data-theme="dark"] .racing-stripe { border-left-color: var(--ds-red); } /* ---- Dark: filter card ---- */ [data-theme="dark"] .card.bg-light { background-color: #1E1E1E !important; } [data-theme="dark"] .p-3.bg-light { background-color: #1E1E1E !important; }