/* ========================================================= DARK MODE — Sigma theme Activated via [data-theme="dark"] attribute on . Set automatically (prefers-color-scheme) or manually via the toggle button in header.php. Logic lives in dark-mode.js. ========================================================= */ html[data-theme="dark"] { color-scheme: dark; } /* Base */ html[data-theme="dark"] body { background: #121212; color: #e0e0e0; } html[data-theme="dark"] html { color: #e0e0e0; } /* Header */ html[data-theme="dark"] header { background-color: #1a1a1a; } html[data-theme="dark"] header #logo a { color: #f0f0f0; } html[data-theme="dark"] header .nav a { color: #e0e0e0; } html[data-theme="dark"] header .nav a:hover { border-color: #0d9ecc; } html[data-theme="dark"] header .nav a.publish { background: #3E7068; border-color: #3E7068; color: #fff!important; } html[data-theme="dark"] body header .nav a#login_open, html[data-theme="dark"] body header .nav a#register_open{ color:#D3D8E0!important; } html[data-theme="dark"] header .nav .my-account > strong { color: #f0f0f0; } html[data-theme="dark"] header .nav .my-account > span { color: #aaa; } html[data-theme="dark"] header .nav a.logout2 { color: #ccc; } /* Footer */ html[data-theme="dark"] footer { background: #1a1a1a; } html[data-theme="dark"] footer .box > a { color: rgba(255,255,255,0.75); } html[data-theme="dark"] footer .box > a:hover { color: #fff; } html[data-theme="dark"] footer .copy, html[data-theme="dark"] footer .language { color: rgba(255,255,255,0.6); } html[data-theme="dark"] footer .copy a, html[data-theme="dark"] footer .language a { color: rgba(255,255,255,0.7); } /* Boxes / cards / widgets */ html[data-theme="dark"] .listing-grid .listing-card, html[data-theme="dark"] .user-card, html[data-theme="dark"] .alert_form, html[data-theme="dark"] body .widget-box, html[data-theme="dark"] .mark_as .select-box-label { background-color: #1e1e1e; border-color: rgba(255,255,255,0.1); } html[data-theme="dark"] .listing-card { border-bottom-color: rgba(255,255,255,0.1); } html[data-theme="dark"] .listing-card-list.listing-text .listing-card { border-bottom-color: rgba(255,255,255,0.1); } html[data-theme="dark"] .listing-card .currency-value { color: #f0f0f0; } html[data-theme="dark"] #sidebar .price { color: #f0f0f0; } html[data-theme="dark"] #sidebar .filters, html[data-theme="dark"] body.user #sidebar { background: #1e1e1e; } html[data-theme="dark"] #sidebar h3 { color: #e0e0e0; } /* Register / Login / other .form-container-box pages (labels were unreadable) */ html[data-theme="dark"] .form-container-box label, html[data-theme="dark"] .form-horizontal label, html[data-theme="dark"] .form-vertical label { color: #cfcfcf; } html[data-theme="dark"] .form-container-box .header h1, html[data-theme="dark"] h1 { color: #f5f5f5; } /* Breadcrumb text (non-link current page item was inheriting an odd color) */ html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] div.breadcrumb, html[data-theme="dark"] ul.breadcrumb, html[data-theme="dark"] ul.breadcrumb li { color: #aaaaaa; } html[data-theme="dark"] .breadcrumb a, html[data-theme="dark"] ul.breadcrumb a { color: #4fc3e8; } /* Search box on homepage */ html[data-theme="dark"] body.home header, html[data-theme="dark"] body.home section.home-search, html[data-theme="dark"] body.home section.header-ad { background-color: #1a1a1a; } html[data-theme="dark"] .home-search { background: #1a1a1a; } html[data-theme="dark"] .main-search label { color: #ccc; } /* Centered single search + pills — high visibility in dark */ html[data-theme="dark"] .home-cats-pills .cat-pill{ background:#2F5A52; border:1px solid #3E7068; box-shadow:0 1px 4px rgba(0,0,0,.35); } html[data-theme="dark"] .home-search-single input[type="text"]{ background:#23282e!important; border-color:#3A414A!important; color:#e6edf3!important; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.35); } html[data-theme="dark"] .home-search-single input[type="text"]::placeholder{ color:#8b949e; } html[data-theme="dark"] .home-search-single input[type="text"]:focus{ background:#23282e!important; border-color:#4fc3e8!important; box-shadow:0 0 0 2px rgba(79,195,232,.25); } html[data-theme="dark"] .btn-search-simple{ color:#e6edf3!important; } html[data-theme="dark"] .btn-search-simple i{ color:#e6edf3; } html[data-theme="dark"] .btn-search-icon{ color:#222!important; background:#fff!important; border-color:#D0D5D0!important; } html[data-theme="dark"] .listing-basicinfo a.title{ color:#7AB8A8!important; } html[data-theme="dark"] .listing-basicinfo a.title:hover{ color:#8AC7B8!important; } html[data-theme="dark"] #item-content h1, html[data-theme="dark"] .item h1{ color:#7AB8A8; } /* "All categories" widget on homepage */ html[data-theme="dark"] #home-cats { background: #1e1e1e; } html[data-theme="dark"] #home-cats h2 { color: #f0f0f0; } html[data-theme="dark"] #home-cats a { background: #2a2a2a; border-color: rgba(255,255,255,0.1); } html[data-theme="dark"] #home-cats a strong { color: #e0e0e0; } html[data-theme="dark"] #home-cats a .icon { color: #4fc3e8; } /* Links */ html[data-theme="dark"] a { color: #4fc3e8; } html[data-theme="dark"] a:hover { color: #7fd6f2; } /* Buttons */ html[data-theme="dark"] .btn.btn-secondary { color: #4fc3e8; border-color: #2a5f6e; } html[data-theme="dark"] .btn.btn-secondary:hover { border-color: #4fc3e8; color: #4fc3e8; } /* Forms */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="week"], html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="color"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="phone"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #1e1e1e; border-color: #444; color: #e0e0e0; } html[data-theme="dark"] input[type="checkbox"] { background: #1e1e1e; border-color: #555; } /* Content wrapper / main / sidebar */ html[data-theme="dark"] #content, html[data-theme="dark"] #main { background: transparent; } html[data-theme="dark"] body.login > section, html[data-theme="dark"] body.register > section, html[data-theme="dark"] body.recover > section, html[data-theme="dark"] body.contact > section, html[data-theme="dark"] body.item-post > section { background: #121212; } html[data-theme="dark"] .breadcrumb { color: #aaa; } html[data-theme="dark"] .breadcrumb a { color: #4fc3e8; } /* Item detail title (works together with the custom item-title styling) */ html[data-theme="dark"] #item-content h1 { color: #f5f5f5; } html[data-theme="dark"] .item #comments { background: #1e1e1e; } /* Placeholder images (no photo / default avatar) — swapped for dark-tuned versions. Files must be placed in oc-content/themes/sigma/images/ alongside the originals. */ html[data-theme="dark"] img[src*="images/no_photo.gif"] { content: url("../images/no_photo_dark.gif"); } html[data-theme="dark"] img[src*="images/user_default.gif"] { content: url("../images/user_default_dark.gif"); } /* Theme toggle button */ .theme-toggle-btn { float: left; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 14px 6px; border-radius: 100px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: 0.2s; color: inherit; } .theme-toggle-btn:hover { border-color: #0d9ecc; } .theme-toggle-btn .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: inline-block; color:#D3D8E0!important; } /* Mobile / narrowed nav — dark */ @media (max-width: 980px){ html[data-theme="dark"] header .nav{ background:#1a1a1a!important; border-top:1px solid #2a2e35; } html[data-theme="dark"] header .nav a{ color:#e0e0e0!important; border-color:#2a2e35!important; background:transparent!important; } html[data-theme="dark"] header .nav a.publish{ background:#3E7068!important; color:#fff!important; border-color:#3E7068!important; } html[data-theme="dark"] header .nav a:hover{ background:#252a33!important; } html[data-theme="dark"] .menu-icon span{ background:#e0e0e0!important; } html[data-theme="dark"] header .nav .theme-toggle-btn{ color:#D3D8E0; border-color:rgba(255,255,255,.2); } }