/* ============================================================ SmartAdmin Bootstrap 5 - Dark Mode CSS Module: Dark Theme Variables & Overrides ============================================================ */ /* Dark Mode Root Variables */ [data-bs-theme="dark"] { color-scheme: dark; /* Background & Text */ --bs-body-bg: #121212; --bs-body-color: #ffffff; /* Gray Scale */ --bs-gray-100: #1e1e1e; --bs-gray-200: #2a2a2a; --bs-gray-300: #383838; --bs-gray-400: #484848; --bs-gray-500: #6a6a6a; --bs-gray-600: #909090; --bs-gray-700: #b0b0b0; --bs-gray-800: #e0e0e0; --bs-gray-900: #f5f5f5; /* Borders */ --bs-border-color: #383838; /* Components */ --bs-component-bg: #1e1e1e; --bs-component-border: #383838; } /* Dark Mode Text Colors */ [data-bs-theme="dark"] { color: #ffffff; } [data-bs-theme="dark"] p, [data-bs-theme="dark"] small, [data-bs-theme="dark"] .small { color: #d0d0d0; } [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 { color: #ffffff; } /* Dark Mode Cards */ [data-bs-theme="dark"] .card { background-color: #1e1e1e; border-color: #383838; color: #ffffff; } [data-bs-theme="dark"] .card-header { background-color: #282828; border-bottom-color: #383838; } [data-bs-theme="dark"] .card-footer { background-color: #282828; border-top-color: #383838; } [data-bs-theme="dark"] .card-text { color: #b0b0b0; } /* Dark Mode Buttons */ [data-bs-theme="dark"] .btn-outline-primary { color: #90caf9; border-color: #90caf9; } [data-bs-theme="dark"] .btn-outline-primary:hover { color: #ffffff; background-color: #90caf9; } [data-bs-theme="dark"] .btn-light { background-color: #383838; border-color: #383838; color: #ffffff; } [data-bs-theme="dark"] .btn-light:hover { background-color: #484848; border-color: #484848; } /* Dark Mode Forms */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .form-range { background-color: #1e1e1e; border-color: #383838; color: #ffffff; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #1e1e1e; border-color: #2196f3; color: #ffffff; box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25); } [data-bs-theme="dark"] .form-control::placeholder { color: #808080; } [data-bs-theme="dark"] .input-group-text { background-color: #282828; border-color: #383838; color: #ffffff; } [data-bs-theme="dark"] .form-check-input { background-color: #1e1e1e; border-color: #383838; } [data-bs-theme="dark"] .form-check-input:checked { background-color: #2196f3; border-color: #2196f3; } /* Dark Mode Tables */ [data-bs-theme="dark"] .table { border-color: #383838; } [data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: #121212; border-bottom-color: #383838; } [data-bs-theme="dark"] .table > thead th { background-color: #1e1e1e; border-bottom-color: #383838; } [data-bs-theme="dark"] .table > tfoot th { background-color: #1e1e1e; border-top-color: #383838; } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #1a1a1a; } [data-bs-theme="dark"] .table-hover > tbody > tr:hover { background-color: #282828; } [data-bs-theme="dark"] .table-bordered { border-color: #383838; } /* Dark Mode Alerts */ [data-bs-theme="dark"] .alert-primary { background-color: rgba(33, 150, 243, 0.15); border-color: #2196f3; color: #90caf9; } [data-bs-theme="dark"] .alert-success { background-color: rgba(76, 175, 80, 0.15); border-color: #4caf50; color: #81c784; } [data-bs-theme="dark"] .alert-danger { background-color: rgba(244, 67, 54, 0.15); border-color: #f44336; color: #ef9a9a; } [data-bs-theme="dark"] .alert-warning { background-color: rgba(255, 152, 0, 0.15); border-color: #ff9800; color: #ffb74d; } [data-bs-theme="dark"] .alert-info { background-color: rgba(0, 188, 212, 0.15); border-color: #00bcd4; color: #80deea; } /* Dark Mode Modals */ [data-bs-theme="dark"] .modal-content { background-color: #1e1e1e; border-color: #383838; } [data-bs-theme="dark"] .modal-header { background-color: #1e1e1e; border-bottom-color: #383838; color: #ffffff; } [data-bs-theme="dark"] .modal-body { background-color: #1e1e1e; color: #ffffff; } [data-bs-theme="dark"] .modal-footer { background-color: #1e1e1e; border-top-color: #383838; } /* Dark Mode Backgrounds */ [data-bs-theme="dark"] .bg-light { background-color: #282828 !important; } [data-bs-theme="dark"] .bg-secondary { background-color: #383838 !important; } [data-bs-theme="dark"] .bg-dark { background-color: #0a0a0a !important; } /* Dark Mode Code */ [data-bs-theme="dark"] code, [data-bs-theme="dark"] pre { background-color: #282828; color: #e0e0e0; } [data-bs-theme="dark"] code { border-radius: 3px; padding: 0.2em 0.4em; } /* Dark Mode Navbar */ [data-bs-theme="dark"] .navbar { background-color: #1e1e1e; border-bottom-color: #383838; } [data-bs-theme="dark"] .navbar-brand { color: #ffffff !important; } /* Dark Mode Pagination */ [data-bs-theme="dark"] .pagination .page-link { background-color: #1e1e1e; border-color: #383838; color: #90caf9; } [data-bs-theme="dark"] .pagination .page-link:hover { background-color: #282828; border-color: #383838; color: #90caf9; } [data-bs-theme="dark"] .pagination .page-link.active { background-color: #2196f3; border-color: #2196f3; } /* Dark Mode Badges */ [data-bs-theme="dark"] .badge-secondary { background-color: #484848; } /* Dark Mode Scrollbar */ [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: #1e1e1e; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #484848; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #606060; } /* Dark Mode Links */ [data-bs-theme="dark"] a { color: #90caf9; } [data-bs-theme="dark"] a:hover { color: #b3d9ff; } /* Dark Mode HR */ [data-bs-theme="dark"] hr { border-top-color: #383838; } /* Dark Mode Dropdown */ [data-bs-theme="dark"] .dropdown-menu { background-color: #1e1e1e; border-color: #383838; } [data-bs-theme="dark"] .dropdown-item { color: #ffffff; } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: #282828; color: #ffffff; } [data-bs-theme="dark"] .dropdown-item.active { background-color: #2196f3; } /* Dark Mode Breadcrumb */ [data-bs-theme="dark"] .breadcrumb { background-color: transparent; } [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #606060; } [data-bs-theme="dark"] .breadcrumb-item.active { color: #808080; } /* Transition Support */ html { transition: background-color 0.3s ease, color 0.3s ease; } [data-bs-theme="dark"] { transition: background-color 0.3s ease, color 0.3s ease; }