/* ============================================================ MONSTER NEWS THEME — dark-mode.css Skema Warna Gelap Lengkap Aktif via class `dark` pada element ============================================================ */ html.dark { --color-bg: #0F0F0F; --color-surface: #1A1A1A; --color-surface-2: #242424; --color-text: #E8E8E2; --color-text-muted: #8A8A80; --color-border: #2E2E2E; --color-link: #E85B4A; --color-link-hover: #FF7060; } /* Header */ html.dark .mn-header { background: #141414; border-color: #2A2A2A; box-shadow: 0 1px 6px rgba(0,0,0,0.4); } html.dark .mn-nav-desktop a { color: #C8C8C0; } html.dark .mn-nav-desktop a:hover, html.dark .mn-nav-desktop .current-menu-item > a { background: var(--color-primary); color: #fff; } html.dark .mn-search-form { background: #242424; border-color: #333; } html.dark .mn-search-form input { color: #E8E8E2; } html.dark .mn-dark-toggle { border-color: #333; color: #C8C8C0; } html.dark .mn-dark-toggle:hover { background: #242424; } html.dark .mn-hamburger span { background: #C8C8C0; } /* Mobile Nav */ html.dark .mn-mobile-nav { background: #141414; } html.dark .mn-mobile-nav a { color: #C8C8C0; border-color: #2A2A2A; } /* Ticker */ html.dark .mn-ticker { background: #1A0000; } /* Cards */ html.dark .mn-card { background: var(--color-surface); border-color: var(--color-border); } html.dark .mn-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4); } html.dark .mn-side-card { background: var(--color-surface); border-color: var(--color-border); } /* Hero */ html.dark .mn-hero-post { background: #000; } /* Section */ html.dark .mn-section-title { color: var(--color-text); } /* Ad Container */ html.dark .mn-ad-wrap { background: #1E1E1E; border-color: #2E2E2E; } /* Float Ad */ html.dark .mn-float-ad { background: #1A1A1A; border-color: var(--color-primary); } /* Sidebar */ html.dark .mn-widget { background: var(--color-surface); border-color: var(--color-border); } html.dark .mn-widget__title { background: var(--color-surface-2); color: var(--color-text); } html.dark .mn-widget-post__title a { color: var(--color-text); } html.dark .mn-widget-list a { color: var(--color-text); } /* Single Post */ html.dark .mn-single__updated { background: #1F1A00; border-color: #5A4500; color: #D4B800; } /* TOC */ html.dark .mn-toc { background: var(--color-surface-2); border-color: var(--color-border); } html.dark .mn-toc__title { color: var(--color-text); } /* Post Content */ html.dark .mn-post-content blockquote { background: var(--color-surface-2); color: var(--color-text-muted); } html.dark .mn-post-content th { background: var(--color-surface-2); } html.dark .mn-post-content th, html.dark .mn-post-content td { border-color: var(--color-border); } /* Inline Related */ html.dark .mn-inline-related { background: linear-gradient(135deg, #1A0500, #1A0A00); border-color: #3A1500; } /* Share */ html.dark .mn-share { border-color: var(--color-border); } /* TTS */ html.dark .mn-tts { background: var(--color-surface-2); border-color: var(--color-border); } /* Exit Intent */ html.dark .mn-exit-box { background: #1A1A1A; } html.dark .mn-exit-box__body h4 { color: var(--color-text); } /* Footer */ html.dark .mn-footer { background: #0A0A0A; } /* Pagination */ html.dark .mn-pagination a, html.dark .mn-pagination span { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } html.dark .mn-pagination a:hover, html.dark .mn-pagination .current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* Archive */ html.dark .mn-archive-title { color: var(--color-text); } /* Section more link */ html.dark .mn-section-more { color: var(--color-primary); border-color: var(--color-primary); } /* Dark mode toggle icon switch */ html.dark .mn-dark-toggle .icon-moon { display: none; } html.dark .mn-dark-toggle .icon-sun { display: inline; } html:not(.dark) .mn-dark-toggle .icon-sun { display: none; } html:not(.dark) .mn-dark-toggle .icon-moon { display: inline; } /* Smooth transition semua elemen saat toggle */ body, .mn-header, .mn-card, .mn-widget, .mn-toc, .mn-side-card, .mn-post-content blockquote { transition: background-color var(--t-normal), border-color var(--t-normal), color var(--t-normal); }