/* ========================================== 1. MODE TERANG (Default) - Diletakkan di :root ========================================== */ :root { --bg-color: #ffffff; --text-color: #333333; --text-muted: #666666; --bg-header: #f8f9fa; --border-color: #e0e0e0; } /* ========================================== 2. MODE GELAP - Aktif saat punya atribut data-theme="dark" ========================================== */ html[data-theme="dark"] { --bg-color: #121212; --text-color: #e0e0e0; --text-muted: #a0a0a0; --bg-header: #1e1e1e; --border-color: #333333; } /* ========================================== 3. PENERAPAN GLOBAL (UNTUK KADENCE & WP) ========================================== */ html[data-theme="dark"] body, html[data-theme="dark"] #page, html[data-theme="dark"] .site, html[data-theme="dark"] .site-container, html[data-theme="dark"] #inner-wrap, html[data-theme="dark"] .content-container, html[data-theme="dark"] .content-wrap, html[data-theme="dark"] .entry.loop-entry, html[data-theme="dark"] .kt-inside-inner-col, html[data-theme="dark"] .btn-kirim, html[data-theme="dark"] .author-header-box, html[data-theme="dark"] .author-post-card, html[data-theme="dark"] .site-content, html[data-theme="dark"] .bp-rel-container, html[data-theme="dark"] .bp-related-wrap { background-color: var(--bg-color) !important; color: var(--text-color) !important; } /* Header & Footer khusus */ html[data-theme="dark"] .site-header, html[data-theme="dark"] .site-header-inner, html[data-theme="dark"] .site-footer { background-color: var(--bg-header) !important; border-color: var(--border-color) !important; } /* Link agar tetap terbaca */ html[data-theme="dark"] a { color: var(--text-color); } /* ========================================== 4. MEMAKSA WARNA TEKS (TYPOGRAPHY FIX) ========================================== */ /* Targetkan semua Judul, Paragraf, dan Daftar */ 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"] p, html[data-theme="dark"] span, html[data-theme="dark"] li, html[data-theme="dark"] .entry-title, html[data-theme="dark"] .entry-content, html[data-theme="dark"] .site-title, html[data-theme="dark"] .widget-title, html[data-theme="dark"] .entry-content .bp-rel-meta h4.bp-rel-title, #page .bp-rel-meta h4.bp-rel-title{ color: var(--text-color) !important; } /* Khusus untuk Link (Tautan) */ html[data-theme="dark"] a, html[data-theme="dark"] .menu-item a{ color: var(--text-color) !important; /* Catatan: Kalau Anda punya variabel warna khusus link (misal: --link-color), ganti var(--text-color) di atas dengan variabel tersebut */ } /* Khusus teks pudar/meta (seperti tanggal, nama penulis, kategori) */ html[data-theme="dark"] .entry-meta, html[data-theme="dark"] .entry-meta a, html[data-theme="dark"] .post-date, html[data-theme="dark"] .post-author, html[data-theme="dark"] .text-muted { color: var(--text-color) !important; } /* Perbaiki warna teks di dalam tombol atau input pencarian (agar tidak ikut gelap) */ html[data-theme="dark"] input, html[data-theme="dark"] textarea { background-color: var(--bg-header) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] ins.adsbygoogle iframe { filter: brightness(.8) contrast(1.2); /* Opsional: sedikit meredupkan iklan agar tidak terlalu silau */ background-color: transparent !important; }