search

zwbetz-gh / cupper-hugo-theme

An accessibility-friendly Hugo theme, ported from the original Cupper project.
https://cupper-hugo-theme.netlify.app/
MIT License
301 stars 190 forks source link

Flashes upon page loading if dark theme is on #47

Closed sosiristseng closed 3 years ago

sosiristseng commented 3 years ago

Describe the bug

When I turn on the dark theme and click for other pages, it briefly turns light (flashes).

Related to #44.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://cupper-hugo-theme.netlify.app/. I suppose the config is from this repo.
  2. Turn on the dark theme at the bottom of the blog page.
  3. Click on one of the post links.
  4. You would see the theme turns light for a brief moment before turning dark again.

Expected behavior The website would stay dark.

Screenshots N/A

Desktop (please complete the following information):

Additional context N/A

zwbetz-gh commented 3 years ago

Thank you for the detailed bug description. I'm able to reproduce this. Now to allow me some time to investigate the cause and some possible solutions

zwbetz-gh commented 3 years ago

@sosiristseng - This took me longer to investigate than expected. I've dreaded touching the "dark theme" code because it's original code to the project that I forked to make this theme. So it took some time to grok how the original authors were doing it, then refactor it into something more clear for myself.

Anyhow, this issue has been addressed in https://github.com/zwbetz-gh/cupper-hugo-theme/commit/27dbcc6dd9354208c8a8eed963fb1b6bff32cbc3

Take it for a spin and let me know if it looks okay on your end.

sosiristseng commented 3 years ago

Tested on my smart phone with the Chrome browser and it worked perfectly without flashes. Thank you for the hard work and quick fix.

zwbetz-gh commented 3 years ago

Glad to hear it. Closing this.

kicheny commented 2 years ago

@zwbetz-gh ~ Sorry to jump in without introduction.

I'm having the same issue with a WordPress theme that the developer is experiencing challenges fixing the issue.

I tested out your code by applying it directly on the theme's head and it works 99.9% of the time.

So, here's my question:

For Step 1, you've clearly mentioned that you've inlined the CSS in the head. But you've not mentioned where you applied Step 2 and Step 3.

Is it okay for you to mention where you applied Steps 2 and 3?

Just want to be sure that I'm applying the code correctly.

zwbetz-gh commented 2 years ago

@kicheny assuming you’re talking about this article: https://zwbetz.com/fix-the-white-flash-on-page-load-when-using-a-dark-theme-on-a-static-site/

Then:

kicheny commented 2 years ago

@zwbetz-gh ~ yes, it's in relation to that article.

I have actually inserted everything in the head and it works great.

I will give your guide a try and see the results.