/* Listee - Dark Mode overrides Usage: 1) Include AFTER style.css 2) Toggle: (or "light") Notes: - Keeps your accent (#c10037) as-is. */ /* Prevent transition on initial load */ html.theme-preload * { transition: none !important; } /* Dashboard/page background behind forms */ html[data-theme="dark"] .dashboard-content { background: var(--lz-bg) !important; } :root { /* light defaults (fallbacks) */ --lz-bg: #ffffff; --lz-bg-2: #f9fafc; --lz-bg-3: #f3f3f3; --lz-surface: #ffffff; --lz-surface-2: #ffffff; --lz-border: #e3e3e3; --lz-text: #0d233e; --lz-text-2: #374b5c; --lz-muted: #666666; --lz-muted-2: #8d8d8d; --lz-accent: #c10037; --lz-shadow: 0px 4.4px 12px -1px rgba(19, 16, 34, 0.06), 0px 2px 6.4px -1px rgba(19, 16, 34, 0.03); } html[data-theme="dark"] { /* base palette */ color-scheme: dark; --lz-bg: #0b0f17; --lz-bg-2: #0f1522; --lz-bg-3: #121a2b; --lz-surface: #0f1522; --lz-surface-2: #121a2b; --lz-border: rgba(255,255,255,.10); --lz-text: rgba(255,255,255,.92); --lz-text-2: rgba(255,255,255,.78); --lz-muted: rgba(255,255,255,.62); --lz-muted-2: rgba(255,255,255,.55); --lz-shadow: 0px 10px 30px rgba(0,0,0,.35); } /* Global */ html[data-theme="dark"] body { background: var(--lz-bg); color: var(--lz-text); } html[data-theme="dark"] a { color: var(--lz-text); } html[data-theme="dark"] a:hover { color: var(--lz-accent); } html[data-theme="dark"] p, html[data-theme="dark"] .text-muted { color: var(--lz-muted) !important; } /* Common surfaces */ html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .chat-cont-right, html[data-theme="dark"] .chat-cont-right .chat-footer { background: var(--lz-surface) !important; color: var(--lz-text) !important; border-color: var(--lz-border) !important; box-shadow: var(--lz-shadow); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .chat-cont-right .chat-header { background: transparent !important; border-color: var(--lz-border) !important; } /* Sections with explicit light backgrounds in template */ html[data-theme="dark"] .banner-section, html[data-theme="dark"] .section-search, html[data-theme="dark"] .category-section { background: var(--lz-bg-2) !important; } /* Headings that are hardcoded dark in template */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .media-section .media-title, html[data-theme="dark"] .messages-form .card-header h4, html[data-theme="dark"] .faq-section h2, html[data-theme="dark"] .faq-section h4, html[data-theme="dark"] .error-wrap h2 { color: var(--lz-text) !important; } /* Inputs */ html[data-theme="dark"] .form-control, html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .search-box .group-img input, html[data-theme="dark"] .chat-footer .attach-btn input, html[data-theme="dark"] .messages-form textarea.tagline { background: var(--lz-bg-3) !important; color: var(--lz-text) !important; border-color: var(--lz-border) !important; } html[data-theme="dark"] ::placeholder { color: rgba(255,255,255,.45) !important; } /* Select2 (template uses it heavily) */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background: var(--lz-bg-3) !important; border-color: var(--lz-border) !important; color: var(--lz-text) !important; } html[data-theme="dark"] .select2-dropdown { background: var(--lz-surface) !important; border-color: var(--lz-border) !important; } html[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--lz-text) !important; } /* Tables */ html[data-theme="dark"] table, html[data-theme="dark"] .table { color: var(--lz-text) !important; } html[data-theme="dark"] .table > :not(caption) > * > * { background: transparent; border-color: var(--lz-border) !important; } html[data-theme="dark"] .listing-table tr td, html[data-theme="dark"] .listing-table tr th, html[data-theme="dark"] .pagelink ul li a { background: var(--lz-surface) !important; border-color: var(--lz-border) !important; color: var(--lz-text) !important; } /* Pagination */ html[data-theme="dark"] .pagination .page-link { background: var(--lz-surface) !important; border-color: var(--lz-border) !important; color: var(--lz-text) !important; } html[data-theme="dark"] .pagination .page-link:hover { color: var(--lz-accent) !important; } /* Badges / accent stays */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-outline-primary:hover { background: var(--lz-accent) !important; border-color: var(--lz-accent) !important; } /* Subtle light-on-dark borders for common separators */ html[data-theme="dark"] hr, html[data-theme="dark"] .border, html[data-theme="dark"] .dropdown-divider { border-color: var(--lz-border) !important; } /* Icon assets that were inverted for light theme */ html[data-theme="dark"] .banner-circle img { filter: none !important; } /* --- Fixes based on your screenshots (navbar + page background) --- */ /* Navbar / header */ html[data-theme="dark"] .header, html[data-theme="dark"] header, html[data-theme="dark"] .navbar, html[data-theme="dark"] .navbar-light, html[data-theme="dark"] .navbar-expand-lg { background: var(--lz-surface) !important; border-bottom: 1px solid var(--lz-border) !important; box-shadow: none !important; } html[data-theme="dark"] .header .navbar-nav .nav-link, html[data-theme="dark"] .header .nav-link, html[data-theme="dark"] .navbar .nav-link, html[data-theme="dark"] .header .header-navbar-rht > li > a, html[data-theme="dark"] .header .header-navbar-rht > li .dropdown-toggle { color: var(--lz-text) !important; } html[data-theme="dark"] .header .navbar-nav .nav-link:hover, html[data-theme="dark"] .navbar .nav-link:hover, html[data-theme="dark"] .header .header-navbar-rht > li > a:hover { color: var(--lz-accent) !important; } html[data-theme="dark"] .navbar-brand, html[data-theme="dark"] .header .navbar-brand { color: var(--lz-text) !important; } html[data-theme="dark"] .navbar-toggler, html[data-theme="dark"] .navbar-toggler-icon { border-color: var(--lz-border) !important; filter: invert(1) grayscale(1); } /* Dropdowns from navbar */ html[data-theme="dark"] .header .dropdown-menu, html[data-theme="dark"] .navbar .dropdown-menu { background: var(--lz-surface) !important; border-color: var(--lz-border) !important; } html[data-theme="dark"] .header .dropdown-menu .dropdown-item, html[data-theme="dark"] .navbar .dropdown-menu .dropdown-item { color: var(--lz-text) !important; } html[data-theme="dark"] .header .dropdown-menu .dropdown-item:hover, html[data-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,.06) !important; color: var(--lz-accent) !important; } /* Page / form background (the white area behind the dark cards) */ html[data-theme="dark"] .content-blk, html[data-theme="dark"] .main-wrapper, html[data-theme="dark"] .page-wrapper, html[data-theme="dark"] .section-blk, html[data-theme="dark"] .content-body, html[data-theme="dark"] .main-content, html[data-theme="dark"] .content { background: var(--lz-bg) !important; } /* Also cover common Bootstrap containers used as "white sections" */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background: var(--lz-bg-2) !important; } /* ===== Dashboard top menu (white bar) ===== */ html[data-theme="dark"] ul.dashborad-menus { background: var(--lz-surface) !important; border: 1px solid var(--lz-border) !important; box-shadow: var(--lz-shadow) !important; } html[data-theme="dark"] ul.dashborad-menus li a { color: var(--lz-text-2) !important; } html[data-theme="dark"] ul.dashborad-menus li a:hover { background: rgba(255,255,255,.06) !important; color: var(--lz-text) !important; } /* active mar jo (accent), de biztositjuk */ html[data-theme="dark"] ul.dashborad-menus li.active a { background: var(--lz-accent) !important; color: #fff !important; } /* ===== Chat left panel (was white) ===== */ html[data-theme="dark"] .chat-cont-left { background: var(--lz-surface) !important; border: 1px solid var(--lz-border) !important; box-shadow: var(--lz-shadow) !important; } /* Chat list items (a-tag media) */ html[data-theme="dark"] .chat-users-list .chat-scroll a.media { background: var(--lz-surface-2) !important; border: 1px solid var(--lz-border) !important; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; } html[data-theme="dark"] .chat-users-list .chat-scroll a.media:hover { background: rgba(255,255,255,.05) !important; } html[data-theme="dark"] .chat-users-list .user-name { color: var(--lz-text) !important; } html[data-theme="dark"] .chat-users-list .user-last-chat, html[data-theme="dark"] .chat-users-list .last-chat-time { color: var(--lz-muted) !important; } /* ha az ikon (chatsearch.svg) “eltunik” soteten */ html[data-theme="dark"] .chat-search img { filter: invert(1) grayscale(1); opacity: .75; } /* ===== Chat right header/footer text colors ===== */ html[data-theme="dark"] .chat-cont-right .media .user-name { color: var(--lz-text) !important; } html[data-theme="dark"] .chat-cont-right .chat-footer { background: var(--lz-surface) !important; border-top: 1px solid var(--lz-border) !important; } /* ===== Message bubbles (received were white) ===== */ html[data-theme="dark"] .chat-body .msg-box > div { background: var(--lz-bg-3) !important; color: var(--lz-text) !important; } html[data-theme="dark"] .chat-body .msg-box p { color: var(--lz-text) !important; } html[data-theme="dark"] .chat-body .msg-box .chat-msg-info { color: var(--lz-muted) !important; } /* sent bubble mar piros, csak a timestamp legyen jol olvashato */ html[data-theme="dark"] .chat-body .media.sent .msg-box .chat-msg-info { color: rgba(255,255,255,.85) !important; } /* Reviews page: cards + review items */ html[data-theme="dark"] .dashboard-info .card.dash-cards, html[data-theme="dark"] .dashboard-info .card { background: transparent !important; box-shadow: var(--lz-shadow) !important; } html[data-theme="dark"] .dashboard-info .card-header { background: var(--lz-surface) !important; border-bottom: 1px solid var(--lz-border) !important; } html[data-theme="dark"] .dashboard-info .card-header h4 { color: var(--lz-text) !important; } html[data-theme="dark"] .dashboard-info .card-body { background: var(--lz-surface) !important; border-radius: 0 0 10px 10px; } html[data-theme="dark"] .dashboard-info .card-body p, html[data-theme="dark"] .review-details p { color: var(--lz-text-2) !important; } html[data-theme="dark"] .review-list li { background: var(--lz-surface-2) !important; border: 1px solid var(--lz-border) !important; } html[data-theme="dark"] .review-details h6 { color: var(--lz-text) !important; } html[data-theme="dark"] .review-details .rating div { color: var(--lz-muted) !important; } /* Dropdown "All Listing" button (pageviews-link) */ html[data-theme="dark"] .card-dropdown li.dropdown.has-arrow a.pageviews-link { background: var(--lz-surface-2) !important; border: 1px solid var(--lz-border) !important; color: var(--lz-text-2) !important; } html[data-theme="dark"] .card-dropdown li.dropdown.has-arrow .dropdown-menu { background: var(--lz-surface) !important; border: 1px solid var(--lz-border) !important; } html[data-theme="dark"] .card-dropdown li.dropdown.has-arrow .dropdown-menu .dropdown-item { color: var(--lz-text-2) !important; } html[data-theme="dark"] .card-dropdown li.dropdown.has-arrow .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,.06) !important; color: var(--lz-text) !important; } /* My Listings table wrapper border (too light in dark mode) */ html[data-theme="dark"] .table-responsive { border-color: rgba(255,255,255,0.10) !important; /* finom sotet keret */ } /* My Listings table wrapper border (too light in dark mode) */ html[data-theme="dark"] .table-responsive { border-bottom-color: rgba(255,255,255,0.10) !important; /* finom sotet keret */ } /* My Listings table wrapper border (too light in dark mode) */ html[data-theme="dark"] .table-responsive { border-left-color: rgba(255,255,255,0.10) !important; /* finom sotet keret */ } /* My Listings table wrapper border (too light in dark mode) */ html[data-theme="dark"] .table-responsive { border-top-color: rgba(255,255,255,0.10) !important; /* finom sotet keret */ } /* My Listings table wrapper border (too light in dark mode) */ html[data-theme="dark"] .table-responsive { border-right-color: rgba(255,255,255,0.10) !important; /* finom sotet keret */ }