search

epicweb-dev / epic-stack

This is a Full Stack app starter with the foundational things setup and configured for you to hit the ground running on your next EPIC idea.
https://www.epicweb.dev/epic-stack
MIT License
4.67k stars 380 forks source link

Page-specific theme bug #447

Closed andrecasal closed 1 year ago

andrecasal commented 1 year ago

Here's the issue.

To reproduce:

  1. Open a specific page of the website and set it to system
  2. Change the OS's theme from auto, then to light, then to dark, and then to auto.
  3. Change to another page: the website will be light. Change to the previous page and refresh. The website will be dark.

Somehow the CH-prefers-color-scheme cookie is page-specific.

Investigating this now.

andrecasal commented 1 year ago

Found the problem: the theme cookie is being set per page. Trying to find out when this happens.

andrecasal commented 1 year ago

Navigating to other pages overrides the first dark cookie and sets a new one. I think this part is related to how Browsers work, not anything specific to our code. Brushing up on browser-handling cookie logic :)

Screenshot 2023-09-14 at 17 38 43

andrecasal commented 1 year ago

Commented out useTheme() and <ClientHintCheck /> on the root.tsx, and the browser still shows page-specific cookies.

I think deleting all page-specific cookies fixes the issue. I'll close the issue for now and re-open if this happens again.

andrecasal commented 1 year ago

Found both this and https://github.com/epicweb-dev/epic-stack/issues/444 bug.

When you change your OS theme, Chrome sets a page-specific cookie: Screenshot 2023-09-14 at 18 02 34

Because the injected script can't handle duplicate cookie keys, it starts an infinite reloading cycle: Screenshot 2023-09-14 at 18 03 19

andrecasal commented 1 year ago

I see this was already fixed with 85d29f63b0d866638192a0f18650dfccf27db9ba