feat(website): add light mode toggle to Docusaurus site#2504
feat(website): add light mode toggle to Docusaurus site#2504sympatheticmoose wants to merge 2 commits intomainfrom
Conversation
Enable the built-in color mode toggle (sun/moon icon) in the navbar, add Grafana light theme CSS variables and Infima mappings, configure a light Prism syntax highlighting theme, and swizzle the ColorModeToggle component with humorous tooltip text. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Hello! 👋 This repository uses Auto for releasing packages using PR labels. ✨ This PR can be merged. It will not be considered when calculating future versions of the npm packages and will not appear in the changelogs. |
sympatheticmoose
added
type/docs
grafana-plugins-platform-bot
bot
moved this from 📬 Triage
to 🔬 In review
in Grafana Catalog Team
jackw
left a comment
jackw
left a comment
There was a problem hiding this comment.
Nice work @sympatheticmoose ! 🚀
| // Use a MutationObserver to strip the inner button's native title whenever | ||
| // React re-applies it, so the browser falls through to our wrapper's title. | ||
| useEffect(() => { | ||
| const button = ref.current?.querySelector('button'); | ||
| if (!button) { | ||
| return; | ||
| } | ||
| button.removeAttribute('title'); | ||
|
|
||
| const observer = new MutationObserver(() => { | ||
| if (button.hasAttribute('title')) { | ||
| button.removeAttribute('title'); | ||
| } | ||
| }); | ||
| observer.observe(button, { attributes: true, attributeFilter: ['title'] }); | ||
| return () => observer.disconnect(); | ||
| }, [colorMode]); |
There was a problem hiding this comment.
If we want this level of customisation I think it would be best to swizzle the ColorModeToggle with eject and customize it rather than rely on useEffect with MutationObserver.
There was a problem hiding this comment.
FWIW Claude got very angry when Codex suggested this, I had to separate the two before nuclear war erupted
codex: The MutationObserver for the tooltip is heavy-handed. It works, but it's fragile — if Docusaurus changes the inner DOM structure, it could silently break. A simpler approach might be to fully swizzle (--eject) the component and just change the title prop directly, or use CSS pointer-events: none on the inner button with title on the wrapper. That said, the wrapping approach is safer for upgrades, so this is a reasonable tradeoff.
claude: MutationObserver — agree it's heavy-handed, but the alternatives are worse. pointer-events: none on the button would break the toggle. Ejecting is fragile on upgrades. Current approach is the right tradeoff. No change.
But I'm happy to switch to the eject approach
There was a problem hiding this comment.
I don't agree with Claude and neither does Docusaurus:
cd docusaurus/website && npm run swizzle @docusaurus/theme-classic -- --list
shows us it's safe to both wrap or eject:
2 participants
Enable the built-in color mode toggle (sun/moon icon) in the navbar, add Grafana light theme CSS variables and Infima mappings, configure a light Prism syntax highlighting theme, and swizzle the ColorModeToggle component.
Light > Dark
Dark > Light
Light mode
Dark mode
What this PR does / why we need it:
Which issue(s) this PR fixes:
Fixes #
Special notes for your reviewer: