/** * Global Mirror Pro - Dark Mode Stylesheet Override * * @package GlobalMirrorPro */ /* Force dark-scheme variables when .dark-mode class is active on */ html.dark-mode { color-scheme: dark; /* Backgrounds */ --color-background: #0B0F19; /* Deep dark indigo slate background */ --color-card-bg: #1E293B; /* Slate 800 for card backgrounds */ --color-white: #1E293B; /* Invert neutral palette variables for high readability */ --color-slate-50: #0F172A; --color-slate-100: #192130; --color-slate-200: #334155; --color-slate-300: #475569; --color-slate-400: #64748B; --color-slate-500: #94A3B8; --color-slate-600: #CBD5E1; --color-slate-700: #E2E8F0; --color-slate-800: #F1F5F9; --color-slate-900: #FFFFFF; /* Specific Component Overrides */ --color-secondary: #F8FAFC; } /* Adjustments for specific elements in Dark Mode */ html.dark-mode img { opacity: 0.9; transition: opacity 0.3s ease; } html.dark-mode img:hover { opacity: 1.0; } /* Make inputs look rich and dark */ html.dark-mode .header-search-form input, html.dark-mode .newsletter-form input { background-color: #192130; border-color: #334155; color: #F8FAFC; } html.dark-mode .header-search-form input:focus { background-color: #1E293B; border-color: var(--color-primary); } /* Weather, EPaper widgets */ html.dark-mode .top-utility-bar { background-color: #080C14; border-bottom-color: #192130; } /* Main Header */ html.dark-mode .main-header { background-color: #0E1626; border-bottom-color: #192130; } /* Navigation Dropdowns */ html.dark-mode .main-navigation-list li ul { background-color: #192130; } /* Social icons on dark background */ html.dark-mode .top-social-icons a { background: #192130; } html.dark-mode .top-social-icons a:hover { background: var(--color-primary); } /* Buttons in Dark Mode */ html.dark-mode .gmp-btn-action { background-color: #1E293B; border-color: #334155; color: #E2E8F0; } html.dark-mode .gmp-btn-action:hover { background-color: #334155; border-color: #475569; } html.dark-mode .gmp-btn-action-primary { background-color: rgba(10, 77, 157, 0.2); color: #60A5FA; border-color: rgba(10, 77, 157, 0.4); } html.dark-mode .gmp-btn-action-primary:hover { background-color: rgba(10, 77, 157, 0.3); } /* Scroll Top and elements */ html.dark-mode .breaking-news-ticker-container { background-color: #0E1626; border-bottom-color: #1E293B; border-top-color: #1E293B; } html.dark-mode .ticker-controls { background-color: #0E1626; } /* State Tab selections */ html.dark-mode .state-tab-btn { background: #1E293B; border-color: #334155; color: #E2E8F0; } html.dark-mode .state-tab-btn:hover { background: #334155; } html.dark-mode .state-tab-btn.active { background: var(--color-primary); color: #FFFFFF; } /* Photo Gallery items */ html.dark-mode .gallery-grid-item { background-color: #1E293B; } /* Author bio fields */ html.dark-mode .author-bio-box { background-color: #1E293B; } /* Full Screen Search Input */ html.dark-mode .search-overlay-input { border-bottom-color: #334155; }