/** * Dark Theme - Domain Intelligence Platform * webscoutr.com * * This file contains all dark theme color definitions and overrides. * Applied when [data-theme="dark"] is set on the element. */ /* ========================================================================== Dark Theme CSS Variables ========================================================================== */ [data-theme="dark"] { /* Color Scheme */ color-scheme: dark; /* Backgrounds */ --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-card: #1e293b; --bg-elevated: #334155; --bg-hover: #334155; --bg-active: #475569; /* Accent Colors */ --accent-primary: #3b82f6; --accent-secondary: #22c55e; --accent-tertiary: #818cf8; /* Text Colors */ --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-inverse: #0f172a; /* Borders */ --border-color: #334155; --border-color-light: #475569; /* Shadows - more prominent for dark theme */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.4); /* Bootstrap Color Overrides for Dark Theme */ --bs-primary: #3b82f6; --bs-primary-rgb: 59, 130, 246; --bs-secondary: #94a3b8; --bs-secondary-rgb: 148, 163, 184; --bs-success: #22c55e; --bs-success-rgb: 34, 197, 94; --bs-info: #38bdf8; --bs-info-rgb: 56, 189, 248; --bs-warning: #fbbf24; --bs-warning-rgb: 251, 191, 36; --bs-danger: #f87171; --bs-danger-rgb: 248, 113, 113; --bs-light: #334155; --bs-light-rgb: 51, 65, 85; --bs-dark: #f1f5f9; --bs-dark-rgb: 241, 245, 249; /* Bootstrap Body */ --bs-body-color: #f1f5f9; --bs-body-color-rgb: 241, 245, 249; --bs-body-bg: #0f172a; --bs-body-bg-rgb: 15, 23, 42; /* Bootstrap Links */ --bs-link-color: #60a5fa; --bs-link-color-rgb: 96, 165, 250; --bs-link-hover-color: #93c5fd; --bs-link-hover-color-rgb: 147, 197, 253; /* Bootstrap Borders */ --bs-border-color: #334155; --bs-border-color-translucent: rgba(241, 245, 249, 0.1); /* Bootstrap Secondary Colors */ --bs-secondary-color: #94a3b8; --bs-secondary-color-rgb: 148, 163, 184; --bs-secondary-bg: #1e293b; --bs-secondary-bg-rgb: 30, 41, 59; /* Bootstrap Tertiary Colors */ --bs-tertiary-color: rgba(241, 245, 249, 0.5); --bs-tertiary-color-rgb: 241, 245, 249; --bs-tertiary-bg: #334155; --bs-tertiary-bg-rgb: 51, 65, 85; /* Form Colors */ --bs-form-valid-color: #22c55e; --bs-form-valid-border-color: #22c55e; --bs-form-invalid-color: #f87171; --bs-form-invalid-border-color: #f87171; /* Code Colors */ --code-bg: #1e293b; --code-color: #f472b6; --pre-bg: #0f172a; --pre-border: #334155; } /* ========================================================================== Dark Theme Base Styles ========================================================================== */ [data-theme="dark"] body { background-color: var(--bg-primary); color: var(--text-primary); } [data-theme="dark"] a { color: var(--bs-link-color); } [data-theme="dark"] a:hover { color: var(--bs-link-hover-color); } /* ========================================================================== Dark Theme Navbar ========================================================================== */ [data-theme="dark"] .navbar { background-color: var(--bg-secondary) !important; border-bottom: 1px solid var(--border-color); } [data-theme="dark"] .navbar-light .navbar-brand, [data-theme="dark"] .navbar-light .nav-link { color: var(--text-primary) !important; } [data-theme="dark"] .navbar-light .nav-link:hover, [data-theme="dark"] .navbar-light .nav-link:focus { color: var(--accent-primary) !important; } [data-theme="dark"] .navbar-light .nav-link.active { color: var(--accent-primary) !important; } [data-theme="dark"] .navbar-toggler { border-color: var(--border-color) !important; } [data-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(241, 245, 249, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } [data-theme="dark"] .dropdown-menu { background-color: var(--bg-secondary); border-color: var(--border-color); box-shadow: var(--shadow-lg); } [data-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--bg-hover); color: var(--text-primary); } [data-theme="dark"] .dropdown-item.active { background-color: var(--accent-primary); color: #ffffff; } [data-theme="dark"] .dropdown-divider { border-color: var(--border-color); } /* ========================================================================== Dark Theme Cards ========================================================================== */ [data-theme="dark"] .card { background-color: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .card-header { background-color: var(--bg-secondary); border-bottom-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .card-footer { background-color: var(--bg-secondary); border-top-color: var(--border-color); } /* ========================================================================== Dark Theme Tables ========================================================================== */ [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-color); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: rgba(255, 255, 255, 0.08); --bs-table-hover-color: var(--text-primary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .table > thead { color: var(--text-secondary); } [data-theme="dark"] .table > thead > tr > th { background-color: #1a2332; border-bottom-color: var(--border-color); color: var(--text-secondary); font-weight: 600; } [data-theme="dark"] .table > tbody > tr > td { border-bottom-color: var(--border-color); } [data-theme="dark"] .table-hover > tbody > tr:hover { background-color: rgba(59, 130, 246, 0.1); } /* Striped tables - alternating row colors */ /* Override custom.css rule: .table-striped > tbody > tr:nth-of-type(odd) > td */ /* Use similar brightness levels to avoid Helmholtz illusion (light rows appearing taller) */ [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd), [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td, [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th { background-color: rgba(148, 163, 184, 0.08) !important; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even), [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > td, [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > th { background-color: rgba(148, 163, 184, 0.03) !important; } /* Striped tables inside cards */ [data-theme="dark"] .card .table-striped > tbody > tr:nth-of-type(odd), [data-theme="dark"] .card .table-striped > tbody > tr:nth-of-type(odd) > td, [data-theme="dark"] .card .table-striped > tbody > tr:nth-of-type(odd) > th { background-color: rgba(148, 163, 184, 0.06) !important; } [data-theme="dark"] .card .table-striped > tbody > tr:nth-of-type(even), [data-theme="dark"] .card .table-striped > tbody > tr:nth-of-type(even) > td, [data-theme="dark"] .card .table-striped > tbody > tr:nth-of-type(even) > th { background-color: rgba(148, 163, 184, 0.02) !important; } /* ========================================================================== Dark Theme Forms ========================================================================== */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--bg-secondary); border-color: var(--accent-primary); color: var(--text-primary); box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25); } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: var(--bg-elevated); color: var(--text-muted); } [data-theme="dark"] .form-label { color: var(--text-secondary); } [data-theme="dark"] .form-text { color: var(--text-muted); } [data-theme="dark"] .form-check-input { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .form-check-input:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); } [data-theme="dark"] .input-group-text { background-color: var(--bg-elevated); border-color: var(--border-color); color: var(--text-secondary); } /* ========================================================================== Dark Theme Buttons ========================================================================== */ [data-theme="dark"] .btn-primary { --bs-btn-bg: #3b82f6; --bs-btn-border-color: #3b82f6; --bs-btn-hover-bg: #2563eb; --bs-btn-hover-border-color: #2563eb; --bs-btn-active-bg: #1d4ed8; --bs-btn-active-border-color: #1d4ed8; } [data-theme="dark"] .btn-secondary { --bs-btn-bg: #475569; --bs-btn-border-color: #475569; --bs-btn-hover-bg: #334155; --bs-btn-hover-border-color: #334155; --bs-btn-active-bg: #1e293b; --bs-btn-active-border-color: #1e293b; --bs-btn-color: #f1f5f9; --bs-btn-hover-color: #f1f5f9; } [data-theme="dark"] .btn-success { --bs-btn-bg: #22c55e; --bs-btn-border-color: #22c55e; --bs-btn-hover-bg: #16a34a; --bs-btn-hover-border-color: #16a34a; } [data-theme="dark"] .btn-danger { --bs-btn-bg: #ef4444; --bs-btn-border-color: #ef4444; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; } [data-theme="dark"] .btn-warning { --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-hover-bg: #d97706; --bs-btn-hover-border-color: #d97706; } [data-theme="dark"] .btn-info { --bs-btn-bg: #0ea5e9; --bs-btn-border-color: #0ea5e9; --bs-btn-hover-bg: #0284c7; --bs-btn-hover-border-color: #0284c7; } [data-theme="dark"] .btn-light { --bs-btn-bg: #334155; --bs-btn-border-color: #475569; --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #64748b; --bs-btn-color: #f1f5f9; --bs-btn-hover-color: #f1f5f9; } [data-theme="dark"] .btn-dark { --bs-btn-bg: #f1f5f9; --bs-btn-border-color: #f1f5f9; --bs-btn-hover-bg: #e2e8f0; --bs-btn-hover-border-color: #e2e8f0; --bs-btn-color: #0f172a; --bs-btn-hover-color: #0f172a; } [data-theme="dark"] .btn-outline-primary { --bs-btn-color: #60a5fa; --bs-btn-border-color: #3b82f6; --bs-btn-hover-bg: #3b82f6; --bs-btn-hover-border-color: #3b82f6; --bs-btn-hover-color: #ffffff; } [data-theme="dark"] .btn-outline-secondary { --bs-btn-color: #94a3b8; --bs-btn-border-color: #64748b; --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #475569; --bs-btn-hover-color: #f1f5f9; } [data-theme="dark"] .btn-outline-success { --bs-btn-color: #4ade80; --bs-btn-border-color: #22c55e; --bs-btn-hover-bg: #22c55e; --bs-btn-hover-border-color: #22c55e; } [data-theme="dark"] .btn-outline-danger { --bs-btn-color: #f87171; --bs-btn-border-color: #ef4444; --bs-btn-hover-bg: #ef4444; --bs-btn-hover-border-color: #ef4444; } [data-theme="dark"] .btn-outline-light { --bs-btn-color: #f1f5f9; --bs-btn-border-color: #64748b; --bs-btn-hover-bg: #334155; --bs-btn-hover-border-color: #334155; --bs-btn-hover-color: #f1f5f9; } /* ========================================================================== Dark Theme Badges ========================================================================== */ [data-theme="dark"] .badge.bg-light { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; } [data-theme="dark"] .badge.bg-secondary { background-color: #475569 !important; } [data-theme="dark"] .badge.text-dark { color: var(--text-primary) !important; } /* ========================================================================== Dark Theme Alerts ========================================================================== */ [data-theme="dark"] .alert-primary { --bs-alert-bg: rgba(59, 130, 246, 0.15); --bs-alert-border-color: rgba(59, 130, 246, 0.3); --bs-alert-color: #93c5fd; } [data-theme="dark"] .alert-secondary { --bs-alert-bg: rgba(100, 116, 139, 0.15); --bs-alert-border-color: rgba(100, 116, 139, 0.3); --bs-alert-color: #cbd5e1; } [data-theme="dark"] .alert-success { --bs-alert-bg: rgba(34, 197, 94, 0.15); --bs-alert-border-color: rgba(34, 197, 94, 0.3); --bs-alert-color: #86efac; } [data-theme="dark"] .alert-danger { --bs-alert-bg: rgba(239, 68, 68, 0.15); --bs-alert-border-color: rgba(239, 68, 68, 0.3); --bs-alert-color: #fca5a5; } [data-theme="dark"] .alert-warning { --bs-alert-bg: rgba(245, 158, 11, 0.15); --bs-alert-border-color: rgba(245, 158, 11, 0.3); --bs-alert-color: #fcd34d; } [data-theme="dark"] .alert-info { --bs-alert-bg: rgba(14, 165, 233, 0.15); --bs-alert-border-color: rgba(14, 165, 233, 0.3); --bs-alert-color: #7dd3fc; } [data-theme="dark"] .alert-light { --bs-alert-bg: rgba(51, 65, 85, 0.5); --bs-alert-border-color: var(--border-color); --bs-alert-color: var(--text-primary); } [data-theme="dark"] .alert-dark { --bs-alert-bg: rgba(241, 245, 249, 0.1); --bs-alert-border-color: rgba(241, 245, 249, 0.2); --bs-alert-color: var(--text-primary); } /* ========================================================================== Dark Theme Modals ========================================================================== */ [data-theme="dark"] .modal-content { background-color: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .modal-header { border-bottom-color: var(--border-color); } [data-theme="dark"] .modal-footer { border-top-color: var(--border-color); } [data-theme="dark"] .modal-title { color: var(--text-primary); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ========================================================================== Dark Theme List Groups ========================================================================== */ [data-theme="dark"] .list-group-item { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .list-group-item:hover { background-color: var(--bg-hover); } [data-theme="dark"] .list-group-item.active { background-color: var(--accent-primary); border-color: var(--accent-primary); } [data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background-color: var(--bg-hover); color: var(--text-primary); } /* ========================================================================== Dark Theme Pagination ========================================================================== */ [data-theme="dark"] .page-link { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .page-link:hover { background-color: var(--bg-hover); border-color: var(--border-color); color: var(--accent-primary); } [data-theme="dark"] .page-item.active .page-link { background-color: var(--accent-primary); border-color: var(--accent-primary); } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); } /* ========================================================================== Dark Theme Code and Pre ========================================================================== */ [data-theme="dark"] code { background-color: var(--code-bg); color: var(--code-color); padding: 0.125rem 0.375rem; border-radius: 4px; } [data-theme="dark"] pre { background-color: var(--pre-bg); border: 1px solid var(--pre-border); color: var(--text-primary); } [data-theme="dark"] pre code { background-color: transparent; color: inherit; padding: 0; } [data-theme="dark"] .bg-light { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .bg-dark { background-color: var(--bg-primary) !important; } /* Code blocks with bg-light class need explicit light text */ [data-theme="dark"] pre.bg-light, [data-theme="dark"] .bg-light pre, [data-theme="dark"] .bg-light code { color: var(--text-primary) !important; } [data-theme="dark"] pre.bg-light code, [data-theme="dark"] .bg-light pre code { color: #e2e8f0 !important; background-color: transparent !important; } /* Inline code inside paragraphs, lists, etc. */ [data-theme="dark"] p code, [data-theme="dark"] li code, [data-theme="dark"] td code, [data-theme="dark"] .card-body code:not(pre code) { background-color: rgba(99, 102, 241, 0.2) !important; color: #a5b4fc !important; padding: 0.125rem 0.375rem; border-radius: 4px; } /* ========================================================================== Dark Theme Progress Bars ========================================================================== */ [data-theme="dark"] .progress { background-color: var(--bg-elevated); } /* ========================================================================== Dark Theme Breadcrumbs ========================================================================== */ [data-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); } [data-theme="dark"] .breadcrumb-item a { color: var(--bs-link-color); } [data-theme="dark"] .breadcrumb-item.active { color: var(--text-muted); } /* ========================================================================== Dark Theme Footer ========================================================================== */ [data-theme="dark"] .site-footer { background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); } [data-theme="dark"] .footer-heading { color: var(--text-primary); } [data-theme="dark"] .footer-links a { color: var(--text-muted); } [data-theme="dark"] .footer-links a:hover { color: var(--text-primary); } [data-theme="dark"] .footer-copyright, [data-theme="dark"] .footer-tagline { color: var(--text-muted); } /* ========================================================================== Dark Theme Text Utilities ========================================================================== */ [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .text-body { color: var(--text-primary) !important; } [data-theme="dark"] .text-body-secondary { color: var(--text-secondary) !important; } /* ========================================================================== Dark Theme Border Utilities ========================================================================== */ [data-theme="dark"] .border { border-color: var(--border-color) !important; } [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--border-color) !important; } /* ========================================================================== Dark Theme Accordion ========================================================================== */ [data-theme="dark"] .accordion-item { background-color: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .accordion-button { background-color: var(--bg-card); color: var(--text-primary); } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--bg-secondary); color: var(--accent-primary); } [data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .accordion-body { background-color: var(--bg-card); } /* ========================================================================== Dark Theme Tabs / Nav ========================================================================== */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--border-color); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--bg-card); border-color: var(--border-color) var(--border-color) var(--bg-card); color: var(--text-primary); } [data-theme="dark"] .nav-pills .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-pills .nav-link:hover { background-color: var(--bg-hover); color: var(--text-primary); } [data-theme="dark"] .nav-pills .nav-link.active { background-color: var(--accent-primary); color: #ffffff; } /* ========================================================================== Dark Theme Tooltips ========================================================================== */ [data-theme="dark"] .tooltip-inner { background-color: var(--bg-elevated); color: var(--text-primary); } [data-theme="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before, [data-theme="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--bg-elevated); } [data-theme="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before, [data-theme="dark"] .tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--bg-elevated); } /* ========================================================================== Dark Theme Popovers ========================================================================== */ [data-theme="dark"] .popover { background-color: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .popover-header { background-color: var(--bg-secondary); border-bottom-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .popover-body { color: var(--text-primary); } /* ========================================================================== Dark Theme Spinners ========================================================================== */ [data-theme="dark"] .spinner-border { --bs-spinner-color: var(--accent-primary); } [data-theme="dark"] .spinner-grow { --bs-spinner-color: var(--accent-primary); } /* ========================================================================== Dark Theme Toast ========================================================================== */ [data-theme="dark"] .toast { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .toast-header { background-color: var(--bg-secondary); border-bottom-color: var(--border-color); color: var(--text-primary); } /* ========================================================================== Dark Theme Offcanvas ========================================================================== */ [data-theme="dark"] .offcanvas { background-color: var(--bg-card); color: var(--text-primary); } [data-theme="dark"] .offcanvas-header { border-bottom-color: var(--border-color); } /* ========================================================================== Dark Theme Scrollbar ========================================================================== */ [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-secondary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--border-color-light); border-radius: 6px; border: 3px solid var(--bg-secondary); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); } /* Firefox scrollbar */ [data-theme="dark"] * { scrollbar-color: var(--border-color-light) var(--bg-secondary); scrollbar-width: thin; } /* ========================================================================== Dark Theme Selection ========================================================================== */ [data-theme="dark"] ::selection { background-color: rgba(59, 130, 246, 0.4); color: #ffffff; } /* ========================================================================== Dark Theme Horizontal Rules ========================================================================== */ [data-theme="dark"] hr { border-color: var(--border-color); opacity: 1; } /* ========================================================================== Dark Theme xterm Terminal ========================================================================== */ [data-theme="dark"] .xterm { background-color: #0d1117; } [data-theme="dark"] .xterm-viewport { background-color: #0d1117 !important; } /* ========================================================================== Dark Theme Choices.js ========================================================================== */ [data-theme="dark"] .choices__inner { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .choices__list--dropdown { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: var(--bg-hover); } [data-theme="dark"] .choices__input { background-color: var(--bg-secondary); color: var(--text-primary); } [data-theme="dark"] .choices__item { color: var(--text-primary); } /* ========================================================================== Theme Toggle Button ========================================================================== */ .theme-toggle { cursor: pointer; border-radius: 0.375rem; transition: background-color 0.2s ease; } .theme-toggle:hover { background-color: rgba(0, 0, 0, 0.05); } [data-theme="dark"] .theme-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } .theme-toggle .ti-sun, .theme-toggle .ti-moon { vertical-align: middle; line-height: 1; } .theme-toggle .ti-sun { display: none; } .theme-toggle .ti-moon { display: inline; } [data-theme="dark"] .theme-toggle .ti-sun { display: inline; } [data-theme="dark"] .theme-toggle .ti-moon { display: none; } /* ========================================================================== System Preference Detection (auto mode) ========================================================================== */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { /* Same as [data-theme="dark"] variables */ color-scheme: dark; --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-card: #1e293b; --bg-elevated: #334155; --bg-hover: #334155; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border-color: #334155; --bs-body-color: #f1f5f9; --bs-body-bg: #0f172a; --bs-link-color: #60a5fa; --bs-border-color: #334155; } }