Themes (aka Dark Mode) not respected on first page loads

[kallmanation]

Describe the bug

When first opening Dev.to (on both mobile & desktop) or when first visiting a new area (going to the dashboard from the homepage; starting a new post) the default theme is shown. This persists for a few page refreshes before my selected theme (night theme) is shown.

To Reproduce

1. Open a private/incognito browser window
2. Log in
3. The default theme is shown (instead of the one in settings)

Expected behavior

The theme selected in settings would show after logging in.

Screenshots

First screen after logging in:

Settings page (It was always set to Night Theme; pre-login):

Desktop (please complete the following information):

• OS, version: macOS Catalina 10.15.7
• Browser, version: Vivaldi 3.4.2066.90 (Stable channel) (x86_64)

Smartphone (please complete the following information):

• Device: Samsung Note 10+
• OS, version: Android 11.0
• Browser, version: Chrome 88.0.4324.93

[github-actions]

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.

[cmgorton]

I noticed this bug to this week. I use the Pink theme and it is happening with that one too.
Thanks for opening this issue.

[oguimbal]

+1 ... except that it does not only happen when loggin in for me... it is almost systematic.

I configured the dark theme, and here is what I'm doing

1. Open dev.to 👉 light
2. CTRL + F5 (to refresh+empty cache) 👉 dark
3. F5 (refresh without emptying cache) 👉 light

Demo below (of the Navigate ➡ CTRL+F5 ➡ F5 scenario... that's literally all I'm doing)

I noticed that forem uses a service worker to avoid reload the entire website on refreshes, or something 🤔... maybe that's coming from this ?

[mstruve]

Hi there! We recently removed the majority of our Service Worker caching in #12834 With that change, I believe that this should no longer be an issue going forward. Any chance you could test this again and let us know if it's still a problem?

[kallmanation]

@mstruve I've followed my reproduction steps above just now and the issue still remained for me

[mstruve]

Hey @kallmanation can you try to recreate this one more time? Please! 🙏

[kallmanation]

I have not noticed this happening organically any longer; but following my reproduction steps seems to still have the first pageload in the wrong theme:

[mariana0pachon]

Noticed this bug today. My theme is set to Dark, and saw it with these steps:

1. Opened dev.to without logging in and it showed default light theme
2. Then logged into my account and still saw light theme
3. Went into Settings and got the Dark theme

[cmgorton]

Thanks for the update/confirmation @mariana0pachon .

[cmgorton]

I noticed this bug again this morning. Just adding to confirm it is still a bug.

[oryanmoshe]

I'd like to take this (:
@cmgorton

[pawelborkar]

@cmgorton
I would like to take this issue.

[cmgorton]

@oryanmoshe assigning you to it. Thanks for helping out here. If you find in a few days you can't work on it let me know and I will assign @pawelborkar to it. If you have any questions as you are working on it please feel free to ask here or in the PR once created!

[cmgorton]

Hey @oryanmoshe wanted to check in and see how you are doing with this issue. Did you have any questions or need any help?

[presidenten]

Found the issue.
When logging in on a clean new browser localStorage data is not set when the theme is applied.

PR coming right up...

[aitchiss]

An approach to fixing this has been agreed over on #14476 - what we are looking at doing is using a custom event to ensure the themes update properly 🙂