/* ============================================================ BlogSphere - Dark Mode Stylesheet ============================================================ File: assets/css/dark-mode.css Purpose: Override CSS variables for dark theme Trigger: Applied when html[data-theme="dark"] Loaded: After global.css on every page How it works: - JavaScript sets data-theme="dark" on - This CSS file overrides the :root variables - All components automatically update via CSS variables ============================================================ */ /* ============================================================ 1. DARK MODE CSS VARIABLE OVERRIDES ============================================================ */ [data-theme='dark'] { /* === NEUTRAL COLORS === */ --color-bg: #0f1117; --color-bg-secondary: #1a1d27; --color-bg-tertiary: #242836; --color-surface: #1a1d27; --color-surface-hover: #242836; /* === TEXT COLORS === */ --color-text: #e4e6eb; --color-text-secondary: #b0b3b8; --color-text-muted: #8a8d91; --color-text-light: #6a6d73; /* === BORDER COLORS === */ --color-border: #2d3040; --color-border-light: #242836; --color-border-dark: #3a3f50; /* === SHADOWS (darker, more subtle) === */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.2); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-hover: 0 8px 24px rgba(108, 92, 231, 0.2); /* === SEMANTIC COLORS (slightly adjusted for dark bg) === */ --color-success-light: rgba(0, 184, 148, 0.15); --color-error-light: rgba(231, 76, 60, 0.15); --color-warning-light: rgba(243, 156, 18, 0.15); --color-info-light: rgba(52, 152, 219, 0.15); } /* ============================================================ 2. NAVBAR DARK MODE ============================================================ */ [data-theme='dark'] .navbar { background-color: var(--color-bg); border-bottom-color: var(--color-border); } [data-theme='dark'] .navbar.scrolled { background-color: rgba(15, 17, 23, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } [data-theme='dark'] .navbar-menu-link:hover { background-color: var(--color-bg-tertiary); } [data-theme='dark'] .navbar-action-btn:hover { background-color: var(--color-bg-tertiary); } /* ============================================================ 3. MOBILE MENU DARK MODE ============================================================ */ [data-theme='dark'] .mobile-menu-drawer { background-color: var(--color-bg); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.5); } [data-theme='dark'] .mobile-menu-header { border-bottom-color: var(--color-border); } [data-theme='dark'] .mobile-menu-close { background-color: var(--color-bg-secondary); color: var(--color-text); } [data-theme='dark'] .mobile-search-form { background-color: var(--color-bg-secondary); border-color: var(--color-border); } [data-theme='dark'] .mobile-menu-link:hover { background-color: var(--color-bg-secondary); } [data-theme='dark'] .mobile-menu-item.active .mobile-menu-link { background-color: rgba(108, 92, 231, 0.1); } /* ============================================================ 4. SEARCH OVERLAY DARK MODE ============================================================ */ [data-theme='dark'] .search-overlay { background-color: rgba(15, 17, 23, 0.97); } [data-theme='dark'] .search-overlay-close { background-color: var(--color-bg-secondary); color: var(--color-text); } [data-theme='dark'] .search-input-wrapper { background-color: var(--color-bg-secondary); border-color: var(--color-border); } [data-theme='dark'] .search-overlay-input { color: var(--color-text); } [data-theme='dark'] .search-suggestion-tag { background-color: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-text-secondary); } [data-theme='dark'] .search-suggestion-tag:hover { background-color: var(--color-primary); color: white; border-color: var(--color-primary); } [data-theme='dark'] .search-result-item:hover { background-color: var(--color-bg-secondary); } /* ============================================================ 5. FOOTER DARK MODE ============================================================ */ [data-theme='dark'] .footer { background-color: var(--color-bg); border-top-color: var(--color-border); } [data-theme='dark'] .footer-newsletter-section { background: linear-gradient(135deg, #4a3f8a 0%, #7c6dd8 100%); } [data-theme='dark'] .footer-newsletter-input-group { background: var(--color-bg-secondary); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } [data-theme='dark'] .footer-newsletter-input { color: var(--color-text); } [data-theme='dark'] .footer-social-link { background-color: var(--color-bg-secondary); color: var(--color-text-secondary); border-color: var(--color-border); } [data-theme='dark'] .footer-social-link:hover { background-color: var(--color-primary); color: white; border-color: var(--color-primary); } [data-theme='dark'] .footer-bottom { border-top-color: var(--color-border); } /* ============================================================ 6. CARDS DARK MODE ============================================================ */ [data-theme='dark'] .card { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme='dark'] .card:hover { border-color: var(--color-border-dark); box-shadow: var(--shadow-hover); } [data-theme='dark'] .card-footer { background-color: var(--color-bg-secondary); border-top-color: var(--color-border); } /* ============================================================ 7. BUTTONS DARK MODE ============================================================ */ [data-theme='dark'] .btn-primary { background-color: var(--color-text); color: var(--color-bg); } [data-theme='dark'] .btn-primary:hover { background-color: #d4d6db; color: var(--color-bg); } [data-theme='dark'] .btn-secondary { background-color: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-text); } [data-theme='dark'] .btn-secondary:hover { background-color: var(--color-bg-tertiary); border-color: var(--color-border-dark); } [data-theme='dark'] .btn-ghost:hover { background-color: var(--color-bg-tertiary); } /* ============================================================ 8. FORMS DARK MODE ============================================================ */ [data-theme='dark'] .form-control, [data-theme='dark'] .form-input { background-color: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-text); } [data-theme='dark'] .form-control:focus, [data-theme='dark'] .form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2); } [data-theme='dark'] .form-control::placeholder, [data-theme='dark'] .form-input::placeholder { color: var(--color-text-light); } [data-theme='dark'] select.form-control, [data-theme='dark'] select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238A8D91' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.762L10.825 4z'/%3E%3C/svg%3E"); } /* ============================================================ 9. ALERTS & TOASTS DARK MODE ============================================================ */ [data-theme='dark'] .alert { border-color: transparent; } [data-theme='dark'] .toast { background-color: var(--color-surface); border-color: var(--color-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } /* ============================================================ 10. BADGES DARK MODE ============================================================ */ [data-theme='dark'] .badge-secondary { background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); } /* ============================================================ 11. CODE BLOCKS DARK MODE ============================================================ */ [data-theme='dark'] code { background-color: var(--color-bg-tertiary); color: var(--color-primary-light); } [data-theme='dark'] pre { background-color: #0d1117; border: 1px solid var(--color-border); } /* ============================================================ 12. SCROLLBAR DARK MODE ============================================================ */ [data-theme='dark'] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme='dark'] ::-webkit-scrollbar-track { background: var(--color-bg); } [data-theme='dark'] ::-webkit-scrollbar-thumb { background: var(--color-bg-tertiary); border-radius: 4px; } [data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: var(--color-border-dark); } /* ============================================================ 13. SELECTION DARK MODE ============================================================ */ [data-theme='dark'] ::selection { background-color: var(--color-primary); color: white; } /* ============================================================ 14. BACK TO TOP DARK MODE ============================================================ */ [data-theme='dark'] .back-to-top { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } /* ============================================================ 15. LOADING OVERLAY DARK MODE ============================================================ */ [data-theme='dark'] .loading-overlay { background-color: rgba(15, 17, 23, 0.8); } /* ============================================================ 16. ADVERTISEMENT BLOCKS DARK MODE ============================================================ */ [data-theme='dark'] .ad-placeholder, [data-theme='dark'] .adsense-container { background-color: var(--color-bg-secondary); border-color: var(--color-border); } /* ============================================================ 17. BREADCRUMB DARK MODE ============================================================ */ [data-theme='dark'] .breadcrumb { background-color: transparent; } [data-theme='dark'] .breadcrumb-link { color: var(--color-text-muted); } [data-theme='dark'] .breadcrumb-link:hover { color: var(--color-primary); } [data-theme='dark'] .breadcrumb-separator { color: var(--color-text-light); } [data-theme='dark'] .breadcrumb-current { color: var(--color-text); } /* ============================================================ 18. TABLE DARK MODE ============================================================ */ [data-theme='dark'] table { border-color: var(--color-border); } [data-theme='dark'] th { background-color: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-text); } [data-theme='dark'] td { border-color: var(--color-border); } [data-theme='dark'] tr:hover td { background-color: var(--color-bg-secondary); } /* ============================================================ 19. PAGINATION DARK MODE ============================================================ */ [data-theme='dark'] .pagination .page-item .page-link { background-color: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-text-secondary); } [data-theme='dark'] .pagination .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); color: white; } [data-theme='dark'] .pagination .page-item .page-link:hover { background-color: var(--color-bg-tertiary); color: var(--color-text); } [data-theme='dark'] .pagination .page-item.disabled .page-link { background-color: var(--color-bg); color: var(--color-text-light); border-color: var(--color-border); } /* ============================================================ 20. BLOCKQUOTE DARK MODE ============================================================ */ [data-theme='dark'] blockquote { border-left-color: var(--color-primary); background-color: var(--color-bg-secondary); padding: var(--space-md); border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* ============================================================ 21. HR / DIVIDER DARK MODE ============================================================ */ [data-theme='dark'] hr { border-color: var(--color-border); } /* ============================================================ 22. IMAGE PLACEHOLDER DARK MODE ============================================================ */ [data-theme='dark'] .card-image, [data-theme='dark'] .search-result-img { background-color: var(--color-bg-tertiary); }