Skip to content

Invert color-mode toggle icon to show the target mode#7

Merged
kurtkluth merged 1 commit into
mainfrom
fix/theme-toggle-icon
Jul 19, 2026
Merged

Invert color-mode toggle icon to show the target mode#7
kurtkluth merged 1 commit into
mainfrom
fix/theme-toggle-icon

Conversation

@kurtkluth

Copy link
Copy Markdown
Owner

The navbar theme toggle showed the icon of the current mode (light -> sun, dark -> moon). This inverts it so the icon shows the mode you would switch to: moon on a light background, sun on a dark background.

Ejects ColorModeToggle from @docusaurus/theme-classic. The .tsx is byte-identical to upstream (low upgrade-maintenance); only the co-located styles.module.css swaps the light/dark display mapping. The system-mode icon is unchanged, and the button title/aria-label still announce the current mode.

Verified in the dev server (moon on light, sun on dark) and npm run build passes.

Co-Authored-By: Claude Opus 4.8 noreply@anthropic.com

Eject ColorModeToggle from theme-classic so the navbar icon shows the
mode you would switch to (moon on a light background, sun on a dark
background) instead of the current mode. The component logic is identical
to upstream; only the co-located styles.module.css swaps the light/dark
display mapping.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@kurtkluth
kurtkluth merged commit dbe45c0 into main Jul 19, 2026
1 check passed
@kurtkluth
kurtkluth deleted the fix/theme-toggle-icon branch July 19, 2026 05:42
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.

1 participant