/* Gunakan media query untuk mendeteksi preferensi dark mode */ @media (prefers-color-scheme: dark) { } /* Gaya untuk Tombol Dark Mode */ .darkmode-button { position: absolute; /* Atur posisi relatif terhadap header-shrink */ right: 70px; /* Sesuaikan jarak dari kanan sesuai kebutuhan */ top: 20px; /* Sesuaikan jarak dari atas sesuai kebutuhan */ height: 24px; width: 24px; padding: 5px; display: flex; justify-content: center; align-items: center; background-color: var(--primary-color);; /* Warna latar belakang tombol default */ border-radius: 50%; /* Membuat tombol bulat */ cursor: pointer; transition: background-color 0.3s ease; z-index: 3; /* Pastikan di atas elemen lain jika diperlukan */ } .darkmode-button:hover { background-color: var(--background-color); } /* Gaya untuk ikon SVG di dalam tombol (akan diinjeksikan oleh darkmode.js) */ .darkmode-button svg { fill: #fff; /* Warna ikon putih */ height: 18px; width: 18px; } /* Media query untuk tampilan mobile (di bawah 750px) */ @media only screen and (max-width: 750px) { .darkmode-button { right: 10px; /* Sesuaikan posisi untuk mobile, mungkin di dekat hamburger button */ top: 20px; } } /* Gaya untuk Mode Gelap */ /* Tambahkan kelas 'dark-mode' ke saat dark mode aktif */ body.dark-mode { background-color: var(--background-color); /* Latar belakang body utama */ color: var(--text-color-dark); /* Warna teks utama */ } /* Gaya untuk Header dalam Dark Mode */ body.dark-mode header .header-fixed::before { background: var(--header-bg-color); /* Latar belakang header lebih gelap */ } body.dark-mode .header-shrink { border-bottom-color: #555; /* Ubah warna border bawah */ border-image: linear-gradient(90deg, var(--warna-kiri) 0, var(--warna-kiri) 33%, var(--warna-tengah) 33.1%, var(--warna-tengah) 66%, var(--warna-belakang) 66.1%, var(--warna-belakang) 100%) 1; /* Sesuaikan gradient border */ } /* Saat dark mode aktif, sembunyikan logo light */ body.dark-mode #logo .logo-light { display: none; } /* Dan tampilkan logo dark */ body.dark-mode #logo .logo-dark { display: block; } body.dark-mode .audioPlayer { background-color: #333; /* Sesuaikan warna pemutar audio */ } body.dark-mode .audioPlayer .btn { color: #f0f0f0; /* Warna tombol play/pause */ } body.dark-mode .hamburger-button .line-satu, body.dark-mode .hamburger-button .line-tiga { background-color: #f0f0f0; /* Warna garis hamburger */ } body.dark-mode .fluid-nav { background: #333; /* Warna background fluid-nav */ } body.dark-mode .menu-utama { background: #333; } body.dark-mode .menu-utama::-webkit-scrollbar-track { background: #555; /* Scrollbar track di dark mode */ } body.dark-mode .menu-utama::-webkit-scrollbar-thumb { background: #888; /* Scrollbar thumb di dark mode */ } body.dark-mode .menu-utama > li > a { color: #f0f0f0; /* Warna teks menu utama */ } body.dark-mode .menu-utama > .current-menu-item > a { background-color: #555; /* Warna item menu aktif */ } body.dark-mode .menu-utama > li > a:hover { background: #444; /* Warna hover menu utama */ } body.dark-mode .menu-utama > li > ul.sub-menu { background: #444; /* Warna background sub-menu */ border-top-color: #555; } body.dark-mode .menu-utama > li > ul.sub-menu > li a { color: #f0f0f0; /* Warna teks sub-menu */ } body.dark-mode .flashnewsCaption { color: #f0f0f0; /* Warna teks breaking news caption */ background: #555; /* Background breaking news caption */ } body.dark-mode .flashnews .flashnewsWrap { background: #333; /* Background breaking news wrap */ } body.dark-mode .flashnewsItem { color: #f0f0f0; /* Warna teks breaking news item */ } body.dark-mode .flashnewsLink { color: #f0f0f0; /* Warna link breaking news */ } body.dark-mode .flashnewsLink:hover { color: #ffce21; /* Warna hover link breaking news (tetap sama jika diinginkan) */ } /* Sesuaikan juga elemen-elemen lain yang ada di header jika diperlukan */ body.dark-mode a { color: #b3d9ff; /* Contoh warna link yang lebih terang di dark mode */ } body.dark-mode a:hover { color: #e6f3ff; } /* Jika ada form pencarian di header */ body.dark-mode .search-form .search-field { background-color: #333; border-color: #555; color: #f0f0f0; } body.dark-mode .search-submit { background-color: #555; border-color: #555; color: #f0f0f0; } /* Contoh untuk body secara umum jika Anda ingin menerapkan dark mode ke seluruh halaman */ body.dark-mode #content-wrap { background-color: #242424; color: #f0f0f0; } body.dark-mode #berita-pilihan { background: #3a3a3a; color: #f0f0f0; } body.dark-mode .judul-berita-pilihan { background: #555; color: #f0f0f0; } body.dark-mode #berita-pilihan h2 a { color: #f0f0f0; } body.dark-mode .news-feed-judul{ color: #fff; } body.dark-mode .sidebar-banner-mobile-top-header-parallax-wrap p{ color: var(--text-color); } body.dark-mode #content-left-wrap, body.dark-mode #news-feed, body.dark-mode .news-feed-list{ background-color: var(--background-color); } body.dark-mode #sidebar-single-wrap { background-color: var(--secondary-color); /* Latar belakang sidebar */ border-left: 1px solid var(--border-color); /* Garis batas jika ada */ color: var(--text-color); /* Warna teks di sidebar */ } body.dark-mode #single-content-wrap { background-color: var(--primary-color); /* Latar belakang konten utama */ color: var(--text-color); /* Warna teks di konten utama */ border-right: 1px solid var(--border-color); /* Garis batas jika ada */ } /* Jika ada judul atau elemen lain di dalam sidebar/konten yang perlu diubah warnanya */ body.dark-mode #sidebar-single-wrap h2, body.dark-mode #sidebar-single-wrap h3, body.dark-mode #single-content-wrap h1, body.dark-mode #single-content-wrap h2, body.dark-mode #single-content-wrap h3 { color: var(--text-color); /* Ubah warna judul */ } body.dark-mode #sidebar-single-wrap a, body.dark-mode #single-content-wrap a { color: var(--link-color); /* Ubah warna link */ } body.dark-mode #sidebar-single-wrap a:hover, body.dark-mode #single-content-wrap a:hover { color: var(--accent-color); /* Ubah warna link saat hover */ } /* Jika ada elemen spesifik lainnya di dalam mereka */ body.dark-mode #single-content-wrap p { color: var(--text-color); } body.dark-mode #single-content-wrap img { /* Anda mungkin ingin menambahkan sedikit efek border atau shadow agar gambar terlihat di background gelap */ box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); } /* Contoh untuk widget di sidebar */ body.dark-mode .widget-area .widget-title { color: var(--accent-color); /* Warna judul widget */ } body.dark-mode .widget-area .widget { background-color: var(--secondary-color); /* Latar belakang widget */ border: 1px solid var(--border-color); margin-bottom: 20px; padding: 15px; } body.dark-mode .widget-area .widget li { color: var(--text-color); } body.dark-mode #sidebar-right { color: var(--link-color); background : var(--primary-color); } body.dark-mode #single-content { color: var(--text-color); background : var(--primary-color); } body.dark-mode .adsbygoogle #iframe, body.dark-mode .before-widget .textwidget, body.dark-mode .before-widget .textwidget p, body.dark-mode .before-widget .textwidget p:last-child, body.dark-mode .before-widget button { border: 1px solid var(--link-color); background-color: var(--background-color); color: var(--text-color); } body.dark-mode .wpp-shortcode, body.dark-mode .textwidget, body.dark-mode .textwidget h2, body.dark-mode .alamat, body.dark-mode .alamat h1 { color: var(--text-color); background-color : var(--background-color); } body.dark-mode .wpp-ajax, body.dark-mode .wpp-list > li > a, body.dark-mode .wpp-list > li:nth-child(2n+1){ color: var(--link-color); background-color : var(--background-color); } body.dark-mode .wpp-shortcode > li > a { color: var(--link-color); background-color : var(--background-color); } body.dark-mode .news-feed-judul-block, body.dark-mode .menu-footer-menu-container, body.dark-mode .menu-footer-menu-container ul{ color: var(--text-color); background : var(--background-color); } body.dark-mode .menu-bawah > ul > li { color: var(--link-color); /* Warna teks menu bawah */ } body.dark-mode .menu-bawah > li > a { color: var(--link-color); /* Warna teks menu bawah */ } body.dark-mode .menu-bawah > li > a:hover{ color: var(--text-color); } /* Sesuaikan semua elemen yang perlu berubah warna di dark mode */ /* PAGE DARKMODE */ body.dark-mode #page-article-text{ background-color: var(--primary-color); } body.dark-mode #category-content-wrap, body.dark-mode .judul-label-kategori, body.dark-mode #category-content, body.dark-mode #category-content h2 > a{ background-color: var(--primary-color); color:var(--text-color); } body.dark-mode #category-content > ul{ color:var(--link-color); } body.dark-mode #category-content > li > a{ color:var(--link-color); } body.dark-mode #category-content > li > a:hover{ color: var(--text-color); } body.dark-mode #page-content { background-color: var(--primary-color); color: var(--text-color); }