/* /assets/css/dark-mode.css */ /* This class will be applied to the tag when dark mode is active */ :root { --dm-bg-primary: #121212; /* A true black for the deepest background */ --dm-bg-secondary: #1e1e1e; /* A lighter grey for cards and containers */ --dm-text-primary: #e0e0e0; /* A soft, off-white for main text */ --dm-text-secondary: #a0a0a0; /* A grey for secondary text */ --dm-border: #333333; /* A subtle border color */ --dm-brand-hover: #f7931e; /* An orange for hover states */ --dm-yellow: #ffcc00; /* A vibrant yellow for accents */ --dm-orange: #ff9500; } body.dark-mode { background-color: #121212 !important; --light-cream: var(--dm-bg-primary); --light-grey: var(--dm-bg-secondary); /* Restores dark grey backgrounds for standard panels */ --dark-text: var(--dm-text-primary); --primary-color: #ffffff; /* Prevents text elements using primary-color from going black */ --secondary-color: var(--dm-brand-hover); --accent-orange: var(--dm-orange); --accent-yellow: var(--dm-yellow); --border-grey: var(--dm-border); --box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6); color: #e0e0e0 !important; color-scheme: dark; } /* --- Component Specific Overrides for Dark Mode --- */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #ffffff !important; } body.dark-mode p, body.dark-mode span, body.dark-mode div { color: #cccccc; } /* Fix Header & Notification Bell Visibility */ body.dark-mode .header { background-color: #1a1a1a !important; border-bottom-color: var(--secondary-color) !important; } body.dark-mode .nav-link, body.dark-mode .notification-bell-btn, body.dark-mode .nav-logo { color: #ffffff !important; } body.dark-mode .nav-link:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* * Cards, Containers, and Panels * This uses attribute selectors to forcefully catch inline white backgrounds * on index.php, alongside your standard classes. */ body.dark-mode .news-card, body.dark-mode .form-container, body.dark-mode .contact-details, body.dark-mode .director-text, body.dark-mode .profile-main, body.dark-mode .profile-sidebar, body.dark-mode .menu-category, body.dark-mode .reviews-section, body.dark-mode .glass-panel, body.dark-mode .opening-hours, body.dark-mode .comment-item, body.dark-mode .reply-form-container, body.dark-mode .notification-list, body.dark-mode .event-list-item, body.dark-mode .event-slide-link, body.dark-mode .events-wrapper, body.dark-mode .events-container, body.dark-mode .calendar-panel, body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background-color: #fff"], body.dark-mode [style*="background: white"], body.dark-mode [style*="background-color: white"], body.dark-mode [style*="background: #ffffff"], body.dark-mode [style*="background-color: #ffffff"], body.dark-mode [style*="background-color:#fff"], body.dark-mode [style*="background:#fff"], body.dark-mode [style*="background-color:#ffffff"], body.dark-mode [style*="background:#ffffff"], body.dark-mode [style*="background: #f8f9fa"], body.dark-mode [style*="background-color: #f8f9fa"], body.dark-mode [style*="background:#f8f9fa"], body.dark-mode [style*="background-color:#f8f9fa"], body.dark-mode [style*="background: rgba(255, 255, 255"], body.dark-mode [style*="background-color: rgba(255, 255, 255"], body.dark-mode [style*="background: rgba(255,255,255"], body.dark-mode [style*="background-color: rgba(255,255,255"], body.dark-mode [style*="background: var(--light-cream)"], body.dark-mode [style*="background-color: var(--light-cream)"], body.dark-mode [style*="background: var(--light-grey)"], body.dark-mode [style*="background-color: var(--light-grey)"] { background-color: var(--dm-bg-secondary) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important; } /* Ensure text inside these panels adapts properly */ body.dark-mode .glass-panel p, body.dark-mode [style*="background:"] p, body.dark-mode [style*="background-color:"] p { color: var(--dm-text-secondary) !important; } body.dark-mode .user-posts-list li { background-color: var(--dm-bg-primary); } /* Protect Buttons from text overrides - NOW BRAND ORANGE */ body.dark-mode .btn, body.dark-mode .btn-primary { background-color: var(--dm-brand-hover) !important; color: #ffffff !important; font-weight: bold; border: none !important; } body.dark-mode .btn:hover, body.dark-mode .btn-primary:hover { background-color: #d88c4b !important; /* Slightly deeper orange for tactile feedback */ color: #ffffff !important; } /* Fix Links */ body.dark-mode a { color: var(--secondary-color); } body.dark-mode a:hover { color: var(--accent-orange); } /* --- Mobile Navigation --- */ body.dark-mode .navbar-mobile { background: rgba(30, 30, 30, 0.95); backdrop-filter: blur(8px); } /* Make filter menu links on News page consistent with buttons */ body.dark-mode .filter-menu a { color: var(--dm-text-primary); } body.dark-mode .filter-menu a.active { background-color: var(--dm-brand-hover) !important; color: #ffffff !important; border-color: var(--dm-brand-hover) !important; } body.dark-mode .filter-menu a:hover:not(.active) { background-color: rgba(247, 147, 30, 0.1) !important; color: var(--dm-brand-hover) !important; border-color: var(--dm-brand-hover) !important; } body.dark-mode .btn-secondary { border-color: var(--dm-border); background-color: transparent; color: var(--dm-text-primary); } /* Improved hover state for secondary buttons */ body.dark-mode .btn-secondary:hover { background-color: var(--dm-border); border-color: var(--dm-text-secondary); color: #ffffff; } body.dark-mode .form-group input, body.dark-mode .form-group textarea, body.dark-mode .form-group select, body.dark-mode .admin-table, body.dark-mode .sidebar-select { background-color: var(--dm-bg-primary); color: var(--dm-text-primary); border-color: var(--dm-border); } body.dark-mode .admin-table thead { background-color: rgba(255, 255, 255, 0.05); } /* --- Text, Footer & Misc --- */ body.dark-mode .post-meta, body.dark-mode .news-card-content p, body.dark-mode .comment-time, body.dark-mode .event-meta, body.dark-mode .review-text, body.dark-mode .review-summary { color: var(--dm-text-secondary); } body.dark-mode .footer { background-color: var(--dm-bg-secondary); } body.dark-mode .footer-nav a { color: var(--dm-text-secondary); } body.dark-mode .footer-nav a:hover { color: var(--dm-text-primary); } body.dark-mode hr, body.dark-mode .comment-thread, body.dark-mode .comments-section, body.dark-mode .post-content + .reaction-bar, body.dark-mode .notification-item, body.dark-mode .notification-header { border-color: var(--dm-border); } /* --- Carousel & Reaction Styling --- */ body.dark-mode .reaction-btn { background-color: var(--dm-bg-secondary); border-color: var(--dm-border); } body.dark-mode .reaction-btn.active { background-color: var(--dm-yellow); border-color: var(--dm-orange); color: #000; } body.dark-mode .reviews-carousel .slick-dots li button:before { color: var(--dm-border); opacity: 1; } body.dark-mode .reviews-carousel .slick-dots li.slick-active button:before { color: var(--dm-yellow); } /* --- Message Box Styling --- */ body.dark-mode .message.success { background-color: #0a3d15; color: #79d790; border-color: #1a5e2a; } body.dark-mode .message.error { background-color: #4f1111; color: #ff8f8f; border-color: #7d2a2a; } body.dark-mode .message.info { background-color: #0d324f; color: #69b4ff; border-color: #1a5482; } /* Ensure Notification Dropdown is readable in Dark Mode */ body.dark-mode .notification-content { background-color: #1e1e1e !important; border: 1px solid #333 !important; } body.dark-mode .notification-header, body.dark-mode .notification-footer { background-color: #1a1a1a !important; color: #fff !important; border-color: #333 !important; } body.dark-mode .notification-item { color: #e0e0e0 !important; border-color: #333 !important; } body.dark-mode .notification-item:hover { background-color: #2a2a2a !important; } body.dark-mode .notification-item.unread { background-color: rgba(247, 147, 30, 0.15) !important; } /* --- Events Page View Switcher --- */ body.dark-mode .view-switch-btn { background-color: var(--dm-bg-secondary); color: var(--dm-text-secondary); border-color: var(--dm-border); } body.dark-mode .view-switch-btn:hover { background-color: var(--dm-border); color: var(--dm-text-primary); } body.dark-mode .view-switch-btn.active { background-color: var(--dm-brand-hover) !important; color: #ffffff !important; border-color: var(--dm-brand-hover) !important; } /* --- Force Mobile Hamburger Menu to be Visible in Dark Mode --- */ body.dark-mode .hamburger { background-color: #ffffff !important; }