/** * KarCMS Dark Mode Stylesheet * * Uses CSS custom properties for easy theme switching. * Activated by [data-bs-theme="dark"] on element. * Bootstrap 5.3 dark mode overrides included. */ /* =================================== CSS Custom Properties (Light/Default) =================================== */ :root { --km-bg-primary: #ffffff; --km-bg-secondary: #f8f9fa; --km-bg-tertiary: #e9ecef; --km-text-primary: #212529; --km-text-secondary: #6c757d; --km-text-muted: #adb5bd; --km-border-color: #dee2e6; --km-border-light: #e9ecef; --km-card-bg: #ffffff; --km-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --km-input-bg: #ffffff; --km-input-border: #ced4da; --km-navbar-bg: #ffffff; --km-topbar-bg: #f8f9fa; --km-footer-bg: #212529; --km-footer-text: #adb5bd; --km-breadcrumb-bg: #f8f9fa; --km-overlay-bg: rgba(0, 0, 0, 0.5); --km-code-bg: #f8f9fa; --km-table-hover-bg: rgba(0, 0, 0, 0.02); --km-transition-speed: 0.3s; } /* =================================== Dark Mode Custom Properties =================================== */ [data-bs-theme="dark"] { --km-bg-primary: #1a1d21; --km-bg-secondary: #212529; --km-bg-tertiary: #2c3034; --km-text-primary: #e9ecef; --km-text-secondary: #adb5bd; --km-text-muted: #6c757d; --km-border-color: #373b3e; --km-border-light: #2c3034; --km-card-bg: #212529; --km-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25); --km-input-bg: #2c3034; --km-input-border: #495057; --km-navbar-bg: #1a1d21; --km-topbar-bg: #14171a; --km-footer-bg: #14171a; --km-footer-text: #adb5bd; --km-breadcrumb-bg: #212529; --km-overlay-bg: rgba(0, 0, 0, 0.7); --km-code-bg: #2c3034; --km-table-hover-bg: rgba(255, 255, 255, 0.03); } /* =================================== Global Dark Mode Transitions =================================== */ body, .top-bar, .navbar, .card, .breadcrumb, footer, .form-control, .form-select, .btn, .dropdown-menu, .modal-content, .offcanvas { transition: background-color var(--km-transition-speed) ease, color var(--km-transition-speed) ease, border-color var(--km-transition-speed) ease; } /* =================================== Body & General =================================== */ [data-bs-theme="dark"] body { background-color: var(--km-bg-primary); color: var(--km-text-primary); } /* =================================== Top Bar =================================== */ [data-bs-theme="dark"] .top-bar { background-color: var(--km-topbar-bg) !important; border-bottom-color: var(--km-border-color) !important; } [data-bs-theme="dark"] .top-bar a { color: var(--km-text-secondary) !important; } [data-bs-theme="dark"] .top-bar a:hover { color: var(--km-text-primary) !important; } /* =================================== Navbar =================================== */ [data-bs-theme="dark"] .navbar, [data-bs-theme="dark"] #mainNavbar { background-color: var(--km-navbar-bg) !important; border-bottom-color: var(--km-border-color) !important; } [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link, [data-bs-theme="dark"] .navbar .nav-link { color: var(--km-text-secondary) !important; } [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:focus, [data-bs-theme="dark"] .navbar .nav-link:hover { color: var(--km-text-primary) !important; } [data-bs-theme="dark"] .navbar-light .navbar-brand, [data-bs-theme="dark"] .navbar .navbar-brand { color: var(--km-text-primary) !important; } [data-bs-theme="dark"] .navbar-toggler { border-color: var(--km-border-color) !important; } [data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); } /* =================================== Dropdown =================================== */ [data-bs-theme="dark"] .dropdown-menu { background-color: var(--km-bg-secondary); border-color: var(--km-border-color); box-shadow: var(--km-card-shadow); } [data-bs-theme="dark"] .dropdown-item { color: var(--km-text-secondary); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--km-bg-tertiary); color: var(--km-text-primary); } [data-bs-theme="dark"] .dropdown-divider { border-top-color: var(--km-border-color); } /* =================================== Cards =================================== */ [data-bs-theme="dark"] .card { background-color: var(--km-card-bg); border-color: var(--km-border-color); box-shadow: var(--km-card-shadow); } [data-bs-theme="dark"] .card-header { background-color: var(--km-bg-tertiary); border-bottom-color: var(--km-border-color); } [data-bs-theme="dark"] .card-footer { background-color: var(--km-bg-tertiary); border-top-color: var(--km-border-color); } /* =================================== Breadcrumb =================================== */ [data-bs-theme="dark"] .breadcrumb-area, [data-bs-theme="dark"] .breadcrumb-section { background-color: var(--km-breadcrumb-bg) !important; } [data-bs-theme="dark"] .breadcrumb-item a { color: var(--km-text-secondary); } [data-bs-theme="dark"] .breadcrumb-item.active { color: var(--km-text-muted); } /* =================================== Forms =================================== */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--km-input-bg); border-color: var(--km-input-border); color: var(--km-text-primary); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--km-input-bg); border-color: #0d6efd; color: var(--km-text-primary); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--km-text-muted); } [data-bs-theme="dark"] .form-label { color: var(--km-text-secondary); } [data-bs-theme="dark"] .form-text { color: var(--km-text-muted) !important; } [data-bs-theme="dark"] .input-group-text { background-color: var(--km-bg-tertiary); border-color: var(--km-input-border); color: var(--km-text-secondary); } /* =================================== Buttons =================================== */ [data-bs-theme="dark"] .btn-outline-secondary { color: var(--km-text-secondary); border-color: var(--km-border-color); } [data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: var(--km-bg-tertiary); border-color: var(--km-text-secondary); color: var(--km-text-primary); } [data-bs-theme="dark"] .btn-light { background-color: var(--km-bg-tertiary); border-color: var(--km-border-color); color: var(--km-text-primary); } [data-bs-theme="dark"] .btn-link.text-dark { color: var(--km-text-secondary) !important; } /* =================================== Tables =================================== */ [data-bs-theme="dark"] .table { color: var(--km-text-primary); border-color: var(--km-border-color); } [data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: var(--km-bg-secondary); border-bottom-color: var(--km-border-color); } [data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--km-table-hover-bg); } [data-bs-theme="dark"] .table thead th { background-color: var(--km-bg-tertiary); border-bottom-color: var(--km-border-color); } /* =================================== Footer =================================== */ [data-bs-theme="dark"] footer, [data-bs-theme="dark"] .footer-area, [data-bs-theme="dark"] .footer-section { background-color: var(--km-footer-bg) !important; } /* =================================== Accordion (FAQ, etc.) =================================== */ [data-bs-theme="dark"] .accordion-item { background-color: var(--km-card-bg); border-color: var(--km-border-color); } [data-bs-theme="dark"] .accordion-button { background-color: var(--km-card-bg); color: var(--km-text-primary); } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--km-bg-tertiary); color: var(--km-text-primary); } [data-bs-theme="dark"] .accordion-body { background-color: var(--km-card-bg); color: var(--km-text-secondary); } /* =================================== Modal =================================== */ [data-bs-theme="dark"] .modal-content { background-color: var(--km-bg-secondary); border-color: var(--km-border-color); } [data-bs-theme="dark"] .modal-header { border-bottom-color: var(--km-border-color); } [data-bs-theme="dark"] .modal-footer { border-top-color: var(--km-border-color); } /* =================================== Offcanvas =================================== */ [data-bs-theme="dark"] .offcanvas { background-color: var(--km-bg-secondary); color: var(--km-text-primary); } /* =================================== Pagination =================================== */ [data-bs-theme="dark"] .page-link { background-color: var(--km-bg-secondary); border-color: var(--km-border-color); color: var(--km-text-secondary); } [data-bs-theme="dark"] .page-link:hover { background-color: var(--km-bg-tertiary); color: var(--km-text-primary); } [data-bs-theme="dark"] .page-item.disabled .page-link { background-color: var(--km-bg-primary); border-color: var(--km-border-color); color: var(--km-text-muted); } /* =================================== Misc Components =================================== */ [data-bs-theme="dark"] .badge.bg-light { background-color: var(--km-bg-tertiary) !important; color: var(--km-text-primary) !important; } [data-bs-theme="dark"] .border { border-color: var(--km-border-color) !important; } [data-bs-theme="dark"] .border-bottom { border-bottom-color: var(--km-border-color) !important; } [data-bs-theme="dark"] .border-top { border-top-color: var(--km-border-color) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--km-bg-secondary) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--km-bg-tertiary) !important; } [data-bs-theme="dark"] .text-dark { color: var(--km-text-primary) !important; } [data-bs-theme="dark"] .text-muted { color: var(--km-text-muted) !important; } [data-bs-theme="dark"] hr { border-color: var(--km-border-color); opacity: 0.3; } [data-bs-theme="dark"] code { background-color: var(--km-code-bg); color: #e685b5; } [data-bs-theme="dark"] pre { background-color: var(--km-code-bg); border-color: var(--km-border-color); } [data-bs-theme="dark"] .shadow-sm { box-shadow: var(--km-card-shadow) !important; } /* =================================== Swiper (Slider) =================================== */ [data-bs-theme="dark"] .swiper-pagination-bullet { background: var(--km-text-muted); } [data-bs-theme="dark"] .swiper-pagination-bullet-active { background: #0d6efd; } /* =================================== SweetAlert2 Dark =================================== */ [data-bs-theme="dark"] .swal2-popup { background-color: var(--km-bg-secondary) !important; color: var(--km-text-primary) !important; } [data-bs-theme="dark"] .swal2-title { color: var(--km-text-primary) !important; } [data-bs-theme="dark"] .swal2-html-container { color: var(--km-text-secondary) !important; } /* =================================== Shortcode Embeds (dark override) =================================== */ [data-bs-theme="dark"] .shortcode-embed { background-color: var(--km-bg-secondary); border-color: var(--km-border-color); } /* =================================== Cookie Consent Banner =================================== */ [data-bs-theme="dark"] .cookie-consent { background-color: var(--km-bg-secondary) !important; border-top-color: var(--km-border-color) !important; } /* =================================== Dark Mode Toggle Button =================================== */ .dark-mode-toggle { background: transparent; border: 1px solid transparent; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--km-text-secondary, #6c757d); transition: all 0.2s ease; font-size: 1.25rem; line-height: 1; } .dark-mode-toggle:hover { background-color: var(--km-bg-tertiary, #e9ecef); color: var(--km-text-primary, #212529); } .dark-mode-toggle .la-moon, .dark-mode-toggle .la-sun { transition: transform 0.3s ease, opacity 0.3s ease; } /* Sun icon hidden in light mode, shown in dark mode */ [data-bs-theme="dark"] .dark-mode-toggle .la-moon { display: none; } [data-bs-theme="dark"] .dark-mode-toggle .la-sun { display: inline-block; color: #ffc107; } /* Moon icon shown in light mode, hidden in dark mode */ .dark-mode-toggle .la-sun { display: none; } .dark-mode-toggle .la-moon { display: inline-block; } /* =================================== Responsive / Images =================================== */ [data-bs-theme="dark"] img { opacity: 0.92; } [data-bs-theme="dark"] img:hover { opacity: 1; } /* Logo should not be dimmed */ [data-bs-theme="dark"] .navbar-brand img { opacity: 1; filter: brightness(1.1); } /* =================================== Scrollbar =================================== */ [data-bs-theme="dark"] ::-webkit-scrollbar { width: 10px; } [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--km-bg-primary); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--km-bg-tertiary); border-radius: 5px; border: 2px solid var(--km-bg-primary); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--km-text-muted); }