feat(heo): improve day-night toggle

[amansamani]

Problem

The HEO theme's current dark mode button has a simple icon-based presentation and does not provide a clear toggle-style interaction.

Solution

Improve the HEO theme's day/night mode toggle with a more intuitive sliding toggle UI.

• Reuse the existing useGlobal().toggleDarkMode() logic.
• Keep the existing theme state and persistence mechanism.
• Replace the previous icon-only presentation with a sliding day/night toggle.
• Use a semantic <button> for better accessibility.
• Add aria-label and aria-pressed attributes.
• Add visible keyboard focus styling.
• Respect users who prefer reduced motion.
• Preserve the existing cRef / handleChangeDarkMode interface used by the mobile drawer.

Benefits

• Provides a clearer and more intuitive light/dark mode control.
• Gives immediate visual feedback for the current theme.
• Improves keyboard and screen-reader accessibility.
• Provides a smoother visual transition between light and dark modes.
• Reuses the existing global theme-switching mechanism instead of rewriting it.
• Keeps the change scoped to the HEO theme.

Changes

themes/heo/components/DarkModeButton.js

• Removed the duplicated dark mode state and persistence logic.
• Reused the existing toggleDarkMode() function from useGlobal().
• Replaced the previous Moon/Sun icon presentation with a sliding toggle.
• Added semantic button behavior.
• Added aria-label and aria-pressed accessibility attributes.
• Added visible keyboard focus styling.
• Added reduced-motion support.
• Preserved the existing imperative ref API used by the mobile drawer.

Testing

• Local development environment tested
• Production build tested

• Light → Dark mode
• Dark → Light mode
• Theme persistence after refresh
• Keyboard interaction
• Mobile drawer interaction
• yarn lint
• git diff --check

Documentation

• Not applicable — no new configuration, environment variable, deployment step, or theme setting was introduced.

Closes #2236

[vercel]

@amansamani is attempting to deploy a commit to the tangly1024's projects Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

✅ Deploy Preview for notionnext-netlify ready!

Name	Link
🔨 Latest commit	5453df6
🔍 Latest deploy log	https://app.netlify.com/projects/notionnext-netlify/deploys/6a926f13c4131c000891b711
😎 Deploy Preview	https://deploy-preview-4471--notionnext-netlify.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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