/* ============================================================ DARK MODE — blog-repo-cleanwhite Activated by: ============================================================ */ /* ── Smooth transition on theme switch ── */ body, .navbar-custom.is-fixed, .navbar-custom.invert, .navbar-default .navbar-collapse, .pager li > a, .pager li > span, pre, code, blockquote, .floating-label-form-group, .table th, .table td { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ── Body & base text ── */ [data-theme="dark"] body { background-color: #1b1b2f; color: #e0e0e0; } [data-theme="dark"] a { color: #c8c8c8; } [data-theme="dark"] a:hover, [data-theme="dark"] a:focus { color: #f05c34; } /* ── Post content links ── */ [data-theme="dark"] .post-container a { color: #7ab3d9; } [data-theme="dark"] .post-container a:hover, [data-theme="dark"] .post-container a:focus { color: #f05c34; } /* ── Headings ── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f0f0f0; } [data-theme="dark"] .post-container h5, [data-theme="dark"] .post-container h6 { color: #aaaaaa; } /* ── Navbar — scrolled (is-fixed) ── */ [data-theme="dark"] .navbar-custom.is-fixed { background-color: rgba(27, 27, 47, 0.97) !important; border-bottom: 1px solid #2e2e50; } [data-theme="dark"] .navbar-custom.is-fixed .navbar-brand, [data-theme="dark"] .navbar-custom.is-fixed .nav li a { color: #e0e0e0; } [data-theme="dark"] .navbar-custom.is-fixed .navbar-brand:hover, [data-theme="dark"] .navbar-custom.is-fixed .navbar-brand:focus, [data-theme="dark"] .navbar-custom.is-fixed .nav li a:hover, [data-theme="dark"] .navbar-custom.is-fixed .nav li a:focus { color: #f05c34; } /* ── Navbar — invert style (no hero image pages) ── */ [data-theme="dark"] .navbar-custom.invert { background-color: #1b1b2f; border-bottom: 1px solid #2e2e50; } [data-theme="dark"] .navbar-custom.invert .navbar-brand, [data-theme="dark"] .navbar-custom.invert .nav li a { color: #e0e0e0; } [data-theme="dark"] .navbar-custom.invert .navbar-brand:hover, [data-theme="dark"] .navbar-custom.invert .navbar-brand:focus, [data-theme="dark"] .navbar-custom.invert .nav li a:hover, [data-theme="dark"] .navbar-custom.invert .nav li a:focus { color: #f05c34; } [data-theme="dark"] .navbar-custom.invert .navbar-toggle .icon-bar { background-color: #e0e0e0; } /* ── Mobile nav dropdown ── */ [data-theme="dark"] .navbar-default .navbar-collapse { background-color: #252547; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } /* The theme fixes the mobile dropdown to 170px wide, float:right. In dark mode the dark panel makes this gap very visible — override to fill the full navbar width instead. */ @media only screen and (max-width: 767px) { [data-theme="dark"] .navbar-default .navbar-collapse { width: 100%; float: none; border-radius: 0; } /* Animate from the top-left instead of top-right for full-width feel */ [data-theme="dark"] #huxblog_navbar { transform-origin: top left; -webkit-transform-origin: top left; } } /* ── Dark mode toggle button ── */ /* Use inline-flex (not flex) so the