feat: add dark mode support and fix a11y color contrast#134
Open
anjan713 wants to merge 1 commit into
Open
Conversation
- Enable theme toggle (appearance.strict: false) - Fix dark-mode accent color contrast: #202020 -> #FF7A33 (7.54:1, WCAG AAA) - Add dark syntax highlighting theme (gruvbox-dark-hard); light mode unchanged - Add dark-mode styling in style.css mirroring the existing light palette Dark mode was previously disabled because the custom CSS was styled for light mode only. Reverting appearance.strict to true disables it again without losing the fixes.
anjan713
force-pushed
the
feat/dark-mode-support
branch
from
July 13, 2026 03:21
ae5568b to
1de7755
Compare
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
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.
Summary
Closes #116 (color contrast; the missing image alt attributes are addressed in #133).
mint a11yreports a color contrast failure: the dark-mode accent (colors.light) was#202020— near-black on a near-black background, 1.22:1 (minimum is 4.5:1). Investigating revealed the root cause: dark mode is locked off (appearance.strict: true) because the customstyle.csswas only ever styled for light mode. This PR fixes the root cause rather than just the reported symptom.The problem is bigger than the reported contrast failure
The screenshots below show what dark mode actually looks like the moment it is enabled — the contrast number from the issue is only one symptom. Fixing only
colors.lightwould still leave dark mode unusable, which is why this PR also touchesstyle.cssand the code-block theme.Screenshot 1 — broken surfaces: the custom CSS hardcodes light-only colors, so the navbar and sidebar stay cream on a dark page, and the table-of-contents card renders white-on-white, unreadable text.
Screenshot 2 — unreadable text in code blocks: the site configures a single, light syntax-highlighting theme (
gruvbox-light-hard), so in dark mode code is painted with dark text on a dark background. Plain-text blocks (no language tag) are nearly invisible;bash/yamlblocks only stay legible by luck of their token colors. This PR fixes the text colors by adding a dark counterpart theme (gruvbox-dark-hard) and flipping the shared text variable (--pangolin-code-inline-fg:#202020→#E8E7E5) so inline code, callout text, and code-group tabs are light in dark mode.Changes
docs.jsoncolors.light:#202020→#FF7A33— contrast vs dark background now 7.54:1 (WCAG AAA)appearance.strict:true→false— enables the built-in light/dark togglestyling.codeblocks.theme: addsgruvbox-dark-hardfor dark mode (light mode keepsgruvbox-light-hardunchanged)style.csshtml.darksection mirroring the existing light palette, reusing the repo's own CSS variables and selectors: surfaces#F2F0E7→#161616, borders#E8E7E5→#2A2A2A, text#202020→#E8E7E5#202020; in dark mode it gains a subtle#3A3A3Aoutline so it stays visible on the dark navbarNotes for reviewers
appearance.strict: truedisables dark mode again for visitors without losing any of the fixes.Verification
mint a11y: Overall Assessment: PASS — all colors meet accessibility standards (light color 7.54:1, AAA)mint validateandmint broken-links: pass