Blinking effect in light mode when navigating to different pages

[zachuri]

Summary

I've been recreating my own portfolio website using Astrojs and was trying to implement the theme switcher. The problem I'm experiencing and I see on your website too is when the theme is on light mode, navigating to another page causes a blinking effect. Most of the time it will blink. Dark mode doesn't have this blinking effect for some reason.

Steps to reproduce

• go to https://uses.craftz.dog/
• press any item that navigates to a new page (Ex. Blue Yeti)
• navigate between home page and item page

Expected behavior:

• I'd imagine no blinking/flickering between pages.

Actual behavior:

• blinking/flicker

Possible solution

One solution I found was removing 'transition-colors duration-500' from the Body.astro component.
This eliminates the page blinking however no more cool transition effect between light and dark mode.

Conclusion

The main reason for this problem is the transition in the Body.astro component. Once removed no more blinking effect. It's a really simple issue but was wondering if there is a possible fix where we're able to still keep the 'transition-colors duration-500' property and have no more blinking.

[zachuri]

Solved

Problem was with Brave browser. Reinstalled and it worked perfectly!