/* ===================================================================== Hyprlab — dark mode Opt-in only: applied when carries .hl-dark, which the inline script in default.hbs sets from localStorage before first paint. A visitor with no stored choice always gets the light theme. Layering note: screen.css (Headline) is token-driven, so most of the work is remapping its --color-* tokens below. --color-white is the one token deliberately NOT remapped: the base theme uses it both as the page surface AND as literal white text over cover images, so the surface uses are overridden by hand further down instead. ===================================================================== */ html.hl-dark { color-scheme: dark; /* ---- palette ---- */ --hl-d-bg: #171021; /* page — replaces white */ --hl-d-elev: #1f1730; /* cards, panels, sidebar, window chrome */ --hl-d-elev-2: #271e3c; /* code, chips, inset fills */ --hl-d-text: #ece8f5; --hl-d-dim: #a99fc0; --hl-d-line: #322747; --hl-d-line-2: #453757; --hl-d-accent-solid: #5b6295; /* brand accent, kept for accent-on-white fills */ /* ---- remap the Headline tokens ---- */ --color-primary-text: var(--hl-d-text); --color-secondary-text: var(--hl-d-dim); --color-lighter-gray: var(--hl-d-elev-2); --color-light-gray: var(--hl-d-line); --color-mid-gray: var(--hl-d-line-2); --color-dark-gray: #cfc7e0; /* "ink" — headings and --hl-ink derive from this, so it flips to near-white */ --color-darker-gray: var(--hl-d-text); /* The stock accent is a mid-tone that under-contrasts on a dark page; lift it for text/links. Solid accent fills are pinned back below. */ --ghost-accent-color: #9aa3d8; /* Shadows need real darkness to read on a dark surface */ --hl-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45); --hl-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .72); } /* ===================================================================== Base theme surfaces that used --color-white as a background ===================================================================== */ html.hl-dark body, html.hl-dark .gh-head, html.hl-dark .is-head-open:not(.is-head-brand):not(.is-head-dark):not(.is-head-transparent) #gh-head, html.hl-dark .is-head-open #gh-head .gh-head-actions { background-color: var(--hl-d-bg); } html.hl-dark .gh-dropdown { background-color: var(--hl-d-elev); border: 1px solid var(--hl-d-line); box-shadow: var(--hl-shadow); } /* the base rule is !important, so this has to be too */ html.hl-dark .gh-dropdown li a { color: var(--hl-d-text) !important; } html.hl-dark .gh-dropdown li a:hover { background-color: var(--hl-d-elev-2); } /* Tables: header fill + the scroll-shadow gradients baked in white */ html.hl-dark .gh-content table:not(.gist table) th { background-color: var(--hl-d-elev); } html.hl-dark .gh-content table:not(.gist table) td:first-child { background-image: linear-gradient(90deg, var(--hl-d-bg) 50%, rgba(23, 16, 33, 0)); } html.hl-dark .gh-content table:not(.gist table) td:last-child { background-image: linear-gradient(270deg, var(--hl-d-bg) 50%, rgba(23, 16, 33, 0)); } html.hl-dark .gh-cta-gradient { background: linear-gradient(180deg, rgba(23, 16, 33, 0), var(--hl-d-bg)); } /* Solid-accent fills keep the brand tone so white text stays legible */ html.hl-dark .gh-primary-btn, html.hl-dark .gh-topic-grid .gh-card.featured.no-image.large { background-color: var(--hl-d-accent-solid); color: #fff; } /* Stacked author avatars use a white ring to separate them; on a dark page the ring has to become the page colour instead. */ html.hl-dark .gh-author-image-list .gh-author-image { border-color: var(--hl-d-bg); } /* Members are disabled so this never renders today, but the stock rule pairs a white fill with --color-darker-gray text, which now resolves to near-white. */ html.hl-dark .gh-subscribe-btn { background-color: var(--hl-d-text); color: var(--hl-d-bg); } /* Headline's own footer (unused — we ship .hl-foot — but keep it sane) */ html.hl-dark .gh-foot { background-color: var(--hl-d-elev); } /* Logo — the wordmark in the site logo is a flat #282828, which sits at 1.26:1 on the dark page. Swap in the white wordmark instead; the uploaded site logo is left alone. !important is needed to beat the theme's own high-specificity `body:not(...) .gh-head-logo img+img { display:none }`. */ html.hl-dark .gh-head-logo img:first-of-type { display: none !important; } html.hl-dark .gh-head-logo .hl-logo-dark { display: block !important; opacity: 1 !important; position: static !important; } /* ===================================================================== Inverted buttons These are near-black in light mode; on a dark page they would sink into the background, so they flip to a light fill with dark text. ===================================================================== */ html.hl-dark .gh-btn, html.hl-dark .hl-btn-primary { background: var(--hl-d-text); background-color: var(--hl-d-text); color: var(--hl-d-bg); } html.hl-dark .hl-btn-primary:hover { background: #fff; color: var(--hl-d-bg); } html.hl-dark .hl-btn-primary svg { color: inherit; } html.hl-dark .hl-btn-ghost { background: var(--hl-d-elev); color: var(--hl-d-text); border-color: var(--hl-d-line); } html.hl-dark .hl-btn-ghost:hover { border-color: var(--hl-d-line-2); } /* ===================================================================== Hyprlab components (hyprlab-projects.css) that hard-code #fff ===================================================================== */ html.hl-dark .hl-tint { background: color-mix(in srgb, var(--hl-accent) 14%, var(--hl-d-elev)); } html.hl-dark .hl-mega-panel { background: var(--hl-d-elev); border-color: var(--hl-d-line); box-shadow: var(--hl-shadow-lg); } html.hl-dark .hl-mega-item:hover { background: var(--hl-d-elev-2); } html.hl-dark .hl-mega-item-ic { background: var(--hl-d-elev-2); border-color: var(--hl-d-line); } html.hl-dark .hl-mega-feature { background: linear-gradient(160deg, color-mix(in srgb, var(--hl-accent) 20%, var(--hl-d-elev)), var(--hl-d-elev-2)); border-color: var(--hl-d-line); } html.hl-dark .hl-window, html.hl-dark .hl-side-card, html.hl-dark .hl-card, html.hl-dark .hl-pill, html.hl-dark .hl-about-project { background: var(--hl-d-elev); } html.hl-dark .hl-card-logo, html.hl-dark .hl-card-glyph { background: linear-gradient(150deg, color-mix(in srgb, var(--hl-accent) 20%, var(--hl-d-elev)), var(--hl-d-elev-2)); } html.hl-dark .hl-about-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--hl-accent) 18%, var(--hl-d-bg)), var(--hl-d-bg)); } html.hl-dark .hl-about-avatar { border-color: var(--hl-d-elev); } /* ===================================================================== Footer — deepen the slate so it sits with the dark page ===================================================================== */ html.hl-dark .hl-foot { background: var(--hl-d-elev); border-top: 1px solid var(--hl-d-line); } html.hl-dark .hl-foot-social a:hover { background: var(--hl-d-text); border-color: var(--hl-d-text); color: var(--hl-d-elev); } /* ===================================================================== The toggle itself ===================================================================== */ .hl-theme-toggle { align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: inline-flex; height: 30px; width: 30px; outline: none; } .hl-theme-toggle:hover { opacity: .9; } .hl-theme-toggle svg { display: block; height: 20px; width: 20px; } /* Show the mode you'd switch TO: moon while light, sun while dark. */ .hl-theme-ic { display: none; line-height: 0; } .hl-theme-ic-moon { display: block; } html.hl-dark .hl-theme-ic-moon { display: none; } html.hl-dark .hl-theme-ic-sun { display: block; } /* Header placement: sits immediately left of the search icon, and follows the same responsive swap the theme applies to .gh-search — the brand copy shows on phones, the actions copy from 768px up. */ .gh-head-actions .hl-theme-toggle { margin-right: -4px; } .gh-head-brand .hl-theme-toggle { margin-right: 2px; } @media (max-width: 767px) { .gh-head-actions .hl-theme-toggle { display: none; } /* logo | toggle | search | burger */ #gh-head .gh-head-brand { grid-template-columns: 1fr auto auto auto; } } @media (min-width: 768px) { .gh-head-brand .hl-theme-toggle { display: none; } } /* Footer placement: in the bottom bar, beside the copyright */ .hl-foot-theme { width: 34px; height: 34px; color: rgba(255, 255, 255, .78); transition: color .15s ease; } .hl-foot-theme:hover { color: #fff; opacity: 1; } .hl-foot-theme svg { height: 17px; width: 17px; } .hl-foot-bottom .hl-foot-theme { margin-left: auto; } /* Respect reduced-motion: no transition flash when switching */ @media (prefers-reduced-motion: reduce) { .hl-theme-toggle, .hl-foot-theme { transition: none; } }