search

AVGVSTVS96 / astroSite

Built with Astro and TailwindCSS, this MPA portfolio & blog site is version 3 of my personal website, my first MPA.
https://astrosite-aid.pages.dev/
GNU Affero General Public License v3.0
0 stars 0 forks source link

Disable CSS transitions when dark mode #269

Closed AVGVSTVS96 closed 6 months ago

AVGVSTVS96 commented 6 months ago

What changed?

A disableTransitions function has been added in ModeToggle.tsx and ThemeToggle.astro files to temporarily disable CSS transitions whenever the theme is switched, providing a smoother experience when switching between dark and light modes.

How to test?

To test, you can switch between light and dark modes in the user interface and observe that transitions on elements don't appear during mode changes, but they do appear when they're intended to, i.e. when a button is hovered.

Update scripts, add disableTransitions() to both mode toggle component implementations -ModeToggle.astro and ThemeToggle.tsx

This prevents the transition from being visible when toggling light and dark mode.

cloudflare-workers-and-pages[bot] commented 6 months ago

Deploying astrosite with  Cloudflare Pages  Cloudflare Pages

Latest commit: ca33b29
Status: ✅  Deploy successful!
Preview URL: https://2e4ba8bb.astrosite-aid.pages.dev
Branch Preview URL: https://disabletransition-bas-90.astrosite-aid.pages.dev

View logs

codesandbox[bot] commented 6 months ago

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

linear[bot] commented 6 months ago

BAS-90 Disable transitions on theme toggle

AVGVSTVS96 commented 6 months ago

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @AVGVSTVS96 and the rest of your teammates on Graphite Graphite