/* Dark/Light theme - overrides. Default: light. Use data-theme="dark" on for dark. */ /* Light (default) - explicit variables for consistency */ :root, [data-theme="light"] { --theme-bg: #fff; --theme-bg-alt: #f0f2f5; --theme-text: #333; --theme-text-muted: #999; --theme-heading: #6A7DF5; --theme-block-bg: #ffffff; --theme-block-text: #000; --theme-nav-bg: transparent; --theme-nav-text: #555; --theme-nav-brand: white; --theme-header-overlay: rgba(0,0,0,0.3); --theme-border: #e0e0e0; --theme-copyright-bg: #e8e8e8; --theme-copyright-text: #333; --theme-banner-bg: #007bff; --theme-banner-border: #0056b3; --theme-banner-btn-bg: #fff; --theme-banner-btn-text: #007bff; } /* Dark mode */ [data-theme="dark"] { --theme-bg: #1a1a1c; --theme-bg-alt: #0d0d0e; --theme-text: #e0e0e0; --theme-text-muted: #a0a0a0; --theme-heading: #8b9cf7; --theme-block-bg: #2a2a2e; --theme-block-text: #e0e0e0; --theme-nav-bg: rgba(26,26,28,0.95); --theme-nav-text: #c0c0c0; --theme-nav-brand: #fff; --theme-header-overlay: rgba(0,0,0,0.5); --theme-border: #3a3a3e; --theme-copyright-bg: #0d0d0e; --theme-copyright-text: #c0c0c0; --theme-banner-bg: #1a3a5c; --theme-banner-border: #2a5a8c; --theme-banner-btn-bg: #2a5a8c; --theme-banner-btn-text: #e0e0e0; } /* Apply theme to main layout (pages using style.css) */ body { background-color: var(--theme-bg); color: var(--theme-text); } .navbar-inverse { background-color: var(--theme-nav-bg); } .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a { color: var(--theme-nav-brand) !important; } .navbar-inverse .navbar-nav > li > a:hover { color: var(--theme-heading) !important; } #headerwrap { color: var(--theme-nav-brand); } #headerwrap h2 { color: var(--theme-nav-text); } #blackwrap { background-color: var(--theme-bg-alt); color: var(--theme-text); border-top-color: var(--theme-border); } #blackwrap h2 { color: var(--theme-text); } .block { background-color: var(--theme-block-bg); color: var(--theme-block-text); } .block p, .block h4 { color: var(--theme-block-text); } [data-theme="dark"] #nation h3, [data-theme="dark"] #event h3, [data-theme="dark"] #figures h3, [data-theme="dark"] #blackwrap .block h4 { -webkit-text-fill-color: var(--theme-heading); color: var(--theme-heading); } #nation, #event, #figures { color: var(--theme-text); } #nation p, #event p, #figures p, #nation h3, #event h3, #figures h3 { color: var(--theme-text); } [data-theme="dark"] #nation h3, [data-theme="dark"] #event h3, [data-theme="dark"] #figures h3 { color: var(--theme-heading); } .story-list { color: var(--theme-text); } .section-title { color: var(--theme-heading); } #copyrights { background: var(--theme-copyright-bg); } #copyrights p, #copyrights .credits { color: var(--theme-copyright-text); } #copyrights a { color: #5cb85c; } /* Download banner theme */ #download-banner { background: var(--theme-banner-bg); border-top-color: var(--theme-banner-border); color: var(--theme-copyright-text); } #download-banner a { background: var(--theme-banner-btn-bg); color: var(--theme-banner-btn-text); } #download-banner a:hover { background: var(--theme-banner-border); color: var(--theme-copyright-text); } /* Theme toggle button in navbar */ .theme-toggle { background: transparent; border: 1px solid currentColor; color: inherit; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; font-size: 18px; transition: opacity 0.2s; } .theme-toggle:hover { opacity: 0.85; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-moon { display: inline; }