Skip to content

Add dark mode with Light, Dark and System choices - #119

Merged
ultimatecoder merged 1 commit into
masterfrom
add-dark-mode
Sep 22, 2026
Merged

ultimatecoder merged 1 commit into
masterfrom
add-dark-mode

Conversation

@ultimatecoder

Copy link
Copy Markdown
Owner

Closes #117.

What

  • Header button cycles Light → Dark → System. The icon and aria-label show the current choice.
  • The choice is saved in localStorage. System is the default and follows the OS setting, switching live when it changes.
  • Mobile browser toolbar color (theme-color) is #424242 in light, as before, and #1b1b1d in dark.

How

  • Minima 2.5 compiles its colors into the CSS and runs lighten/darken on them, so its variables can't become CSS custom properties. Dark mode is a set of override rules under html[data-theme="dark"] in _sass/dark-theme.scss.
  • An inline script in _includes/head.html sets data-theme before the stylesheet paints, so there is no light flash. assets/js/theme.js handles the button, the OS change event and syncing across tabs.
  • Without JavaScript the button stays hidden and a prefers-color-scheme media query follows the OS.
  • Code blocks use rouge's github.dark colors (_sass/_syntax-dark.scss). The dark palette meets WCAG AA contrast (text 13.4:1, links 7.1:1, meta 6.6:1).
  • Colors fade only right after a click (html.theme-transition), never on page load.

Verification

  • ./scripts/test passes (build + htmlproofer).
  • Compiled main.css compared with master: 0 lines removed or changed, only additions, so light mode is unchanged.
  • In the browser preview:
    • Clicking the button cycles the stored value (light, dark, system), the icon, the label and theme-color.
    • Dark persists across a page change on a light OS.
    • On System, switching the OS between light and dark updates the page without a reload.
    • No console errors, and no fade on load.
    • At mobile width the button sits in the hamburger menu, with no horizontal scroll.

🤖 Generated with Claude Code

A header button cycles Light, Dark and System, closing #117. The
choice is saved in localStorage; System, the default, follows the OS
setting and switches live when it changes.

Minima 2.5 compiles its colors into the CSS and runs lighten/darken on
them, so dark mode is a set of override rules scoped to
html[data-theme=dark]. The light CSS is unchanged. An inline script in
<head> sets the theme before first paint so dark visitors see no light
flash, and without JavaScript the page follows the OS through
prefers-color-scheme.

Dark code blocks use rouge's github.dark colors, and every text and
background pair meets WCAG AA contrast.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@ultimatecoder
ultimatecoder merged commit 5d2c3f9 into master Sep 22, 2026
2 checks passed
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.

Add dark mode

1 participant