Skip to content

feat: add dark mode support and fix a11y color contrast#134

Open
anjan713 wants to merge 1 commit into
fosrl:mainfrom
anjan713:feat/dark-mode-support
Open

feat: add dark mode support and fix a11y color contrast#134
anjan713 wants to merge 1 commit into
fosrl:mainfrom
anjan713:feat/dark-mode-support

Conversation

@anjan713

@anjan713 anjan713 commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Summary

Closes #116 (color contrast; the missing image alt attributes are addressed in #133).

mint a11y reports 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 custom style.css was 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.light would still leave dark mode unusable, which is why this PR also touches style.css and 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.

darkmodeissue1

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/yaml blocks 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.

darkmodeissue2

Changes

docs.json

  • colors.light: #202020#FF7A33 — contrast vs dark background now 7.54:1 (WCAG AAA)
  • appearance.strict: truefalse — enables the built-in light/dark toggle
  • styling.codeblocks.theme: adds gruvbox-dark-hard for dark mode (light mode keeps gruvbox-light-hard unchanged)

style.css

  • New html.dark section mirroring the existing light palette, reusing the repo's own CSS variables and selectors: surfaces #F2F0E7#161616, borders #E8E7E5#2A2A2A, text #202020#E8E7E5
  • The "Start for free" button keeps its original #202020; in dark mode it gains a subtle #3A3A3A outline so it stays visible on the dark navbar

Notes for reviewers

  • The dark gray values are a proposal that mirrors the light palette's relationships — happy to swap in official brand values if they exist.
  • One-line revert: setting appearance.strict: true disables dark mode again for visitors without losing any of the fixes.
  • Light mode is visually unchanged.

Verification

  • mint a11y: Overall Assessment: PASS — all colors meet accessibility standards (light color 7.54:1, AAA)
  • mint validate and mint broken-links: pass
  • Both modes verified manually in the browser (navbar, sidebar, footer, code blocks, callouts, TOC card)

- 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix Mintlify accessibility issues: color contrast failure and missing image alt attributes

2 participants