fix(theme): permanent dark mode + sidebar always open + arrows on edges#14
Merged
Conversation
Three bugs the first deploy surfaced: 1. The mode picker offered light/dark/navy/etc but the brand is void-only. Customers reading at 2am should never see white. 2. The sidebar was hidden by default on a fresh visit because of how mdBook reads localStorage. The chapter list was effectively invisible. 3. When the sidebar IS open and the viewport is between 1080px and 1380px (most laptop screens), mdBook's chrome hides the wide previous/next arrows and shows mobile inline arrows at the bottom. The user saw no side arrows. Fixes: - book.toml: default-theme and preferred-dark-theme both set to "navy" so mdBook starts dark. - theme/css/variables.css: every built-in theme class (.light, .navy, .coal, .ayu, .rust, plus :root and html) resolves to the same dark palette. A stale localStorage preference cannot flash a light page. Theme picker hidden via display:none because the choice does nothing. - theme/head.hbs: a tiny synchronous script pre-sets the mdbook-theme and mdbook-sidebar localStorage keys so a fresh visitor lands on dark + sidebar-open before the page paints. - theme/css/typography.css: explicit @media override that keeps the wide nav arrows visible whenever the sidebar is open, with higher specificity than mdBook's built-in chrome rule. Plus explicit left/right + float pinning on .nav-chapters.previous and .next so any RTL or specificity edge case can't flip them. Plus a belt-and-braces dark body background rule that paints before any JS or theme class can change it. - meta name="theme-color" updated to #0a0a0b (pitch). Palette is pure brand void per product.md: #0a0a0b page background (pitch) #050505 sidebar background (void) #14141a raised surface, table header #ece3cc primary text (bone on void) #ff9156 links (ember-3 for AA on void) #ff6a3d active accents (ember-2) #ffe6b0 inline code colour (marrow) Verified locally: build emits `<html class="navy sidebar-visible">` on every page, theme CSS bundle includes the nav-wide-wrapper override and the !important background paint, fonts.googleapis.com preconnect still present.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three bugs the first deploy surfaced:
Fixes:
Palette is pure brand void per product.md:
#0a0a0b page background (pitch) #050505 sidebar background (void) #14141a raised surface, table header #ece3cc primary text (bone on void) #ff9156 links (ember-3 for AA on void) #ff6a3d active accents (ember-2) #ffe6b0 inline code colour (marrow)
Verified locally: build emits
<html class="navy sidebar-visible">on every page, theme CSS bundle includes the nav-wide-wrapper override and the !important background paint, fonts.googleapis.com preconnect still present.What this does
Describe what changed and why in one to three sentences.
Type of change
How to test
Security checklist
Breaking changes
State whether this changes API docs, webhook contracts, or deployment guidance.
Linked issues
Closes #
Notes for reviewers
Anything important that is not obvious from the diff.