bootstrapdark-4.6.2/bootstrapdark.css

Bootstrap Dark Theme 4.6.2 version

/* Custom Dark Mode for Bootstrap 4.6 (using BS5.3 colors for variants) */

/* Global Dark Mode Styles */
body {
    background-color: #121212; /* Very dark grey, close to black, common for dark modes */
    color: #e0e0e0; /* Light text for readability */
}

/* Headings */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    color: #f0f0f0; /* Slightly lighter headings */
}

/* Links */
body a {
    color: #8ab4f8; /* A vibrant, readable blue for links (common in dark UIs) */
}

body a:hover {
    color: #a6c8ff; /* Slightly brighter on hover */
}

/* Navbar */
body .navbar {
    background-color: #1f1f1f !important; /* Darker navbar background, complements body */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

body .navbar-light .navbar-brand {
    color: #f0f0f0;
}

body .navbar-light .navbar-nav .nav-link {
    color: #e0e0e0;
}

body .navbar-light .navbar-nav .nav-link:hover,
body .navbar-light .navbar-nav .nav-link:focus {
    color: #ffffff;
}

body .navbar-light .navbar-nav .active > .nav-link,
body .navbar-light .navbar-nav .nav-link.active,
body .navbar-light .navbar-nav .nav-link.show,
body .navbar-light .navbar-nav .show > .nav-link {
    color: #ffffff;
}

body .navbar-light .navbar-toggler {
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Cards */
body .card {
    background-color: #1f1f1f; /* Darker card background */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    color: #e0e0e0;
}

body .card-header {
    background-color: #2c2c2c; /* Slightly lighter card header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
}

body .card-footer {
    background-color: #2c2c2c; /* Slightly lighter card footer */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
}

/* Tables */
body .table {
    color: #e0e0e0;
}

body .table thead th {
    color: #f0f0f0;
    background-color: #2c2c2c; /* Darker table header background */
    border-color: #2c2c2c; /* Border matches background */
}

body .table th,
body .table td {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Darker border for cells */
}

body .table-bordered {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body .table-bordered th,
body .table-bordered td {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03); /* Subtle stripe for dark mode */
}

body .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.07); /* Hover effect */
}

body .table-dark {
    color: #fff;
    background-color: #2c2c2c;
}

body .table-dark th,
body .table-dark td,
body .table-dark thead th {
    border-color: #383838;
}

/* Forms */
body .form-control {
    color: #e0e0e0;
    background-color: #1f1f1f;
    border-color: rgba(255, 255, 255, 0.1);
}

body .form-control:focus {
    color: #e0e0e0;
    background-color: #1f1f1f;
    border-color: #0d6efd; /* Bootstrap 5 Primary Blue for focus border */
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); /* Bootstrap 5 Primary Blue for focus shadow */
}

body .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

body .form-text {
    color: #b0b0b0;
}

body .input-group-text {
    background-color: #2c2c2c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
}

/* Buttons */
body .btn-primary {
    color: #ffffff; /* Light text for primary button */
    background-color: #0d6efd; /* Bootstrap 5 Primary Blue */
    border-color: #0d6efd; /* Bootstrap 5 Primary Blue */
}
body .btn-primary:hover {
    color: #ffffff;
    background-color: #0a58ca; /* Slightly darker shade for hover */
    border-color: #0a58ca;
}

/* Light button adjusted for dark mode: Dark background with white text */
body .btn-light {
    color: #ffffff; /* White text */
    background-color: #212121; /* Very dark grey, close to body background */
    border-color: #212121;
}

body .btn-light:hover {
    color: #ffffff;
    background-color: #333333; /* Slightly lighter dark grey on hover */
    border-color: #333333;
}

/* Dark button */
body .btn-dark {
    color: #ffffff;
    background-color: #343a40; /* Bootstrap 5 Dark (gray-800) */
    border-color: #343a40;
}

body .btn-dark:hover {
    color: #ffffff;
    background-color: #23272b; /* Slightly darker shade for hover */
    border-color: #1d2124;
}

/* Other Bootstrap button variants for dark mode compatibility */
body .btn-secondary {
    color: #ffffff;
    background-color: #6c757d; /* Bootstrap 5 Secondary (gray-600) */
    border-color: #6c757d;
}
body .btn-secondary:hover {
    color: #ffffff;
    background-color: #5a6268; /* Slightly darker shade for hover */
    border-color: #545b62;
}

body .btn-success {
    color: #ffffff;
    background-color: #198754; /* Bootstrap 5 Green */
    border-color: #198754;
}
body .btn-success:hover {
    color: #ffffff;
    background-color: #157347; /* Slightly darker shade for hover */
    border-color: #146c43;
}

body .btn-danger {
    color: #ffffff;
    background-color: #dc3545; /* Bootstrap 5 Red */
    border-color: #dc3545;
}
body .btn-danger:hover {
    color: #ffffff;
    background-color: #bb2d3b; /* Slightly darker shade for hover */
    border-color: #b02a37;
}

body .btn-warning {
    color: #212529; /* Dark text for visibility on warning yellow */
    background-color: #ffc107; /* Bootstrap 5 Yellow */
    border-color: #ffc107;
}
body .btn-warning:hover {
    color: #1a1e21;
    background-color: #e0a800; /* Slightly darker shade for hover */
    border-color: #d39e00;
}

body .btn-info {
    color: #ffffff;
    background-color: #0dcaf0; /* Bootstrap 5 Cyan (Info) */
    border-color: #0dcaf0;
}
body .btn-info:hover {
    color: #ffffff;
    background-color: #31d2f2; /* Slightly darker shade for hover */
    border-color: #25cff2;
}


/* Jumbotron (Note: Jumbotron is removed in Bootstrap 5) */
body .jumbotron {
    background-color: #1f1f1f;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Alerts */
body .alert {
    border: 1px solid transparent; /* Default alert border */
    color: #f0f0f0; /* Default alert text */
}

body .alert-primary {
    background-color: #2c2c2c; /* Dark background for primary alert */
    border-color: #2c2c2c;
    color: #0d6efd; /* Bootstrap 5 Primary Blue for primary alert text */
}

body .alert-secondary {
    background-color: #383838; /* Dark background for secondary alert */
    border-color: #383838;
    color: #b0b0b0; /* Light text for readability */
}

body .alert-success {
    background-color: #1e4620; /* Darker green background */
    border-color: #1e4620;
    color: #198754; /* Bootstrap 5 Green for success alert text */
}

body .alert-danger {
    background-color: #4e1c20; /* Darker red background */
    border-color: #4e1c20;
    color: #dc3545; /* Bootstrap 5 Red for danger alert text */
}

body .alert-warning {
    background-color: #4a3400; /* Darker orange background */
    border-color: #4a3400;
    color: #ffc107; /* Bootstrap 5 Yellow for warning alert text */
}

body .alert-info {
    background-color: #1c3d4f; /* Darker blue background */
    border-color: #1c3d4f;
    color: #0dcaf0; /* Bootstrap 5 Cyan (Info) for info alert text */
}

body .alert-light {
    background-color: #212121; /* Darker light alert background, matches new btn-light */
    border-color: #212121;
    color: #f0f0f0; /* Light text for light alert */
}

body .alert-dark {
    background-color: #0d0d0d; /* Very dark background for dark alert */
    border-color: #0d0d0d;
    color: #b0b0b0;
}

/* Modals */
body .modal-content {
    background-color: #1f1f1f;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #2c2c2c;
    color: #f0f0f0;
}

body .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #2c2c2c;
}

body .close {
    color: #f0f0f0;
    text-shadow: none;
}
body .close:hover {
    color: #fff;
    text-shadow: none;
}

/* Progress Bars */
body .progress {
    background-color: #2c2c2c;
}

body .progress-bar {
    background-color: #0d6efd; /* Bootstrap 5 Primary Blue for progress */
}

/* List Groups */
body .list-group-item {
    background-color: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body .list-group-item.active {
    background-color: #0d6efd; /* Bootstrap 5 Primary Blue */
    border-color: #0d6efd;
    color: #ffffff;
}

body .list-group-item-action:hover,
body .list-group-item-action:focus {
    background-color: #2c2c2c;
    color: #f0f0f0;
}

/* Badges */
body .badge-light {
    background-color: #212121; /* Matches new btn-light background */
    color: #ffffff; /* White text */
}

body .badge-dark {
    background-color: #343a40; /* Bootstrap 5 Dark (gray-800) */
    color: #f0f0f0;
}

/* Pagination */
body .page-link {
    background-color: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #8ab4f8; /* A readable blue for links */
}

body .page-link:hover {
    background-color: #2c2c2c;
    border-color: #2c2c2c;
    color: #a6c8ff;
}

body .page-item.disabled .page-link {
    background-color: #1f1f1f;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

body .page-item.active .page-link {
    background-color: #0d6efd; /* Bootstrap 5 Primary Blue */
    border-color: #0d6efd;
    color: #ffffff;
}

/* Dropdowns */
body .dropdown-menu {
    background-color: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body .dropdown-item {
    color: #e0e0e0;
}

body .dropdown-item:hover,
body .dropdown-item:focus {
    background-color: #2c2c2c;
    color: #f0f0f0;
}

body .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tooltips & Popovers */
body .tooltip-inner {
    background-color: #2c2c2c;
    color: #f0f0f0;
}

body .bs-tooltip-auto[x-placement^="top"] .arrow::before,
body .bs-tooltip-top .arrow::before {
    border-top-color: #2c2c2c;
}

body .bs-tooltip-auto[x-placement^="right"] .arrow::before,
body .bs-tooltip-right .arrow::before {
    border-right-color: #2c2c2c;
}

body .bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
body .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #2c2c2c;
}

body .bs-tooltip-auto[x-placement^="left"] .arrow::before,
body .bs-tooltip-left .arrow::before {
    border-left-color: #2c2c2c;
}

body .popover {
    background-color: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body .popover-header {
    background-color: #2c2c2c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
}

body .popover-body {
    color: #e0e0e0;
}

body .bs-popover-auto[x-placement^="top"] > .arrow::before,
body .bs-popover-top > .arrow::before {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body .bs-popover-auto[x-placement^="top"] > .arrow::after,
body .bs-popover-top > .arrow::after {
    border-top-color: #1f1f1f;
}

body .bs-popover-auto[x-placement^="right"] > .arrow::before,
body .bs-popover-right > .arrow::before {
    border-right-color: rgba(255, 255, 255, 0.1);
}

body .bs-popover-auto[x-placement^="right"] > .arrow::after,
body .bs-popover-right > .arrow::after {
    border-right-color: #1f1f1f;
}

body .bs-popover-auto[x-placement^="bottom"] > .arrow::before,
body .bs-popover-bottom > .arrow::before {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body .bs-popover-auto[x-placement^="bottom"] > .arrow::after,
body .bs-popover-bottom > .arrow::after {
    border-bottom-color: #1f1f1f;
}

body .bs-popover-auto[x-placement^="left"] > .arrow::before,
body .bs-popover-left > .arrow::before {
    border-left-color: rgba(255, 255, 255, 0.1);
}

body .bs-popover-auto[x-placement^="left"] > .arrow::after,
body .bs-popover-left > .arrow::after {
    border-left-color: #1f1f1f;
}


/* Breadcrumbs */
body .breadcrumb {
    background-color: #1f1f1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body .breadcrumb-item.active {
    color: #e0e0e0;
}

/* Carousel */
body .carousel-caption {
    color: #f0f0f0;
}

body .carousel-control-prev-icon,
body .carousel-control-next-icon {
    filter: invert(1); /* Invert for visibility on dark backgrounds */
}

/* Custom Select */
body .custom-select {
    color: #e0e0e0;
    background-color: #1f1f1f;
    border-color: rgba(255, 255, 255, 0.1);
}

body .custom-control-label {
    color: #e0e0e0;
}

/* Code */
body code,
body kbd,
body pre,
body samp {
    background-color: #2c2c2c;
    color: #f0f0f0;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Images */
/* You might want to subtly adjust image filters if they look too bright, but generally not necessary for all. */
/* body img {
    filter: brightness(0.9);
} */

/* Responsive Utilities (if any specific background/text colors are used) */
/* Example: if you have .bg-light or .text-dark used on specific elements */
body .bg-light {
    background-color: #2c2c2c !important; /* Darker background for 'light' */
}

body .text-dark {
    color: #f0f0f0 !important;
}

body .bg-white {
    background-color: #1f1f1f !important;
}

/* Specific Border Overrides */
body .border {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body .border-top {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}
body .border-right {
    border-right-color: rgba(255, 255, 255, 0.1) !important;
}
body .border-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
body .border-left {
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* For specific components that use 'light' or 'dark' variants in their class names */
body .bg-light {
    background-color: #1f1f1f !important; /* Darker background for 'light' */
}
body .text-light {
    color: #f0f0f0 !important; /* Lighter text for 'light' */
}

/* Overriding .text-muted for better visibility */
body .text-muted {
    color: #b0b0b0 !important;
}

body .bg-error {
  background-color: #7b2f37 !important;
}

body .bg-validation-warning {
  background-color: #7b2f37 !important;
}

body .error-row {
  background-color: #4a1c1e !important;
}

body .error-row-warning {
  background-color: #4a1c1e !important;
}