Dark mode tweaks

How are you loading the script? Are you using the script here?: https://generatepress.com/forums/topic/is-it-possible-to-fire-generate_element_display-using-wp-hooks/#post-2179091

Kindly let us know.

hey, sorry for the misunderstanding.

I mean to say I read somewhere that it can be fixed by inserting some code though I COULDN'T DO IT.

conclusively, I'm not loading any script here.

I see. How are you adding the CSS?

Does the issue come with the CSS? That is, if you remove the CSS, does the issue disappear as well?

Can you also share the link where you read about the code to fix this?

I'm applying the CSS via hook wp_head in the elements section.

reference solution:https://stackoverflow.com/questions/71799083/white-flash-on-dark-mode-on-refreshing-page

although you can check a ton of guides in the related google search.

You’re not adding any classes though. The code in your reference shouldn’t be applicable since it’s just adding a class when it’s dark mode.

You’re using @media (prefers-color-scheme: dark). The FOUC mentioned in the thread is the one that’s applicable. It could happen that the light mode CSS is loading first before this CSS, and that is causing the flash. The CSS is not delivered fast enough.

You can try setting the style as critical css in your optimization plugin and see if this would resolve the issue, or try setting a lower value priority when hooking the CSS.

I can’t replicate it from my end though so I’m thinking in a Geographical sense, I’m nearer to your server than you are. So perhaps you can try using a CDN as well.

Hope this clarifies!

yeah, I know I have taken a different route since I couldn't apply the former.

I have used a lower priority value for the specific hook (8 from the default 10) but the problem remains. And it's interfering with the final rendered style if I'm going still lower.

Using a CDN won't solve the issue, all it will do is speedify the page rendering to the point an average human does not notice it.
It isn't a proper solution.

All I want to ask is can you provide me a code snippet and tell me where to put this to solve this issue?

And I understand if that's outside the limits of what I could ask from the support. In that case, can you tell if you guys have any timeline for the dark mode release? It's a much-awaited feature and Generate Press being the frontrunner shouldn't lag behind. :)

regards

The issue arises because your dark mode styles are loading after the page is rendered. Which will be related to your site / server / optimization setup. Its not something we have a magic piece of code to fix unfortunately.

Doing dark mode properly has to be considered during your design process not as retrofit to a current site. The most i can advise is related to my reply here:

https://generatepress.com/forums/topic/is-it-possible-to-fire-generate_element_display-using-wp-hooks/#post-2175309

Point 2 is where we swap the CSS Variables for the colors.

Heres an example CSS:

@media (prefers-color-scheme: dark) {
body {
    --contrast: var(--dm-contrast);
    --contrast-2: var(--dm-contrast-2);
    --contrast-3: var(--dm-contrast-3);
    --base: var(--dm-base);
    --base-2: var(--dm-base-2);
    --base-3: var(--dm-base-3);
    --accent: var(--dm-accent);
    }
}

if the browser preference is set to dark, it will swap the left hand color eg. contrast for the another color eg. dm-contrast

So for every lightmode color you have in the GP Global Colors, you create a dark mode version.

This method should remove swapping CSS and less likely to lead to the style changing flash.

thanks David for the reply. I'll try to apply this and see if it resolves this issue.

You're welcome