feat(theme-classic): replace native color mode tooltip with fast CSS …

[Injora]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

This PR improves the perceived performance and user experience of the ColorModeToggle by replacing the browser's slow, native title attribute with a fast, custom CSS-driven tooltip.

Previously, when hovering over the dark/light mode toggle, users had to wait for the standard browser and OS delay (often >1s) for the tooltip to appear. By moving this into a ::after pseudo-element and passing the label via a data-tooltip attribute, the tooltip now smoothly and rapidly fades in below the button, drastically enhancing the premium interactive feel of Docusaurus navbars.

Test Plan

• Hovered over the ColorMode Toggle in both Light and Dark mode to verify the custom tooltip bubble correctly adapts (using --ifm-color-emphasis-900/100) and displays the appropriate translated mode label.
• Clicked the toggle to cycle through themes and ensured the pseudo-element's attr(data-tooltip) updates instantaneously alongside the icon changes.
• Tested using keyboard navigation (:focus-visible) to verify tooltip accessibility is preserved.

Screen.Recording.2026-04-03.at.12.04.05.mov

Test links

Deploy preview: https://deploy-preview-_____--docusaurus-2.netlify.app/

Related issues/PRs

N/A — Self-identified visual UX enhancement.

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	e9e0088
🔍 Latest deploy log	https://app.netlify.com/projects/docusaurus-2/deploys/69cf61ef59703d000891d83e
😎 Deploy Preview	https://deploy-preview-11891--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[slorber]

Thanks for the PR, but this is not something we were looking to introduce. Please open an issue with a design proposal first to see if we want that feature.

If we introduce a tooltip system to Docusaurus, we'll do this globally in a comprehensive way across the whole theme.

We'll likely do this in the future, using modern CSS such as anchor positioning.