/* Dark Theme Styles */ /* This file contains all the CSS rules for dark mode. The theme_loader_script.php adds a 'dark' class to the tag to activate these styles. */ /* =================================== General Dark Mode Styles ======================================*/ html.dark body { background-color: #121212; color: #e0e0e0; } html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark p, html.dark span, html.dark li, html.dark .text { color: #e0e0e0; } html.dark .section-title, html.dark .title { color: #ffffff; } /* =================================== Header Dark Mode ======================================*/ html.dark header.sticky-top, html.dark header.sticky-top .bg-white { background-color: #1a1a1a !important; border-bottom: 1px solid #333; } html.dark .navbar-brand .logo-default { filter: invert(1) brightness(2); /* Simple way to make a dark logo light */ } html.dark .nav-link { color: #e0e0e0 !important; } html.dark .nav-link:hover, html.dark .nav-link.active { color: #38B6FF !important; } html.dark .btn-dark { background-color: #38B6FF !important; border-color: #38B6FF !important; color: #121212 !important; } /* =================================== Quiz & Result Pages Dark Mode ======================================*/ html.dark .question-card { background-color: #2c2c2c; border-left-color: #38B6FF; } html.dark .question-card p, html.dark .form-check-label { color: #f1f1f1; } html.dark .blog, html.dark .course { background-color: #1a1a1a; border: 1px solid #333; } /* =================================== Registration & Contact Form Dark Mode ======================================*/ html.dark .contact-formfield input, html.dark .contact-formfield select { background-color: #2c2c2c; color: #f1f1f1; border-color: #444; } html.dark .contact-formfield::after { color: #f1f1f1; } html.dark .contact-formfield select option { background-color: #2c2c2c; color: #f1f1f1; } html.dark .contact-formfield input:focus, html.dark .contact-formfield select:focus { border-color: #38B6FF; box-shadow: 0 0 0 2px rgba(56, 182, 255, 0.25); } /* =================================== Footer Dark Mode ======================================*/ html.dark .footer-section { background: #1a1a1a; } html.dark .copyright-area { background: #121212; } html.dark .footer-widget-heading h3, html.dark .cta-text h4, html.dark .footer-social-icon span { color: #ffffff; } html.dark .footer-text p, html.dark .cta-text span, html.dark .footer-widget ul li a, html.dark .copyright-text p { color: #a0a0a0; } html.dark .footer-widget ul li a:hover { color: #38B6FF; } html.dark .subscribe-form input { background: #2c2c2c; border-color: #444; } /* =================================== Quiz Wizard Dark Mode ======================================*/ html.dark .quiz-wizard-container { background-color: #1a1a1a; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } html.dark .progress-counter { color: #a0a0a0; } html.dark .progress-bar-container { background-color: #2c2c2c; } html.dark .progress-bar-fill { background-color: #38B6FF; } html.dark .quiz-navigation { border-top-color: #333; } html.dark .quiz-nav-btn.prev { color: #38B6FF; border-color: #38B6FF; } html.dark .quiz-nav-btn.prev:hover:not(:disabled) { background-color: #38B6FF; color: #121212; } html.dark .question-group.error .question-card { border-left-color: #f44336; background-color: #3d2323; }