[Resolved] How can I enable Dark mode on theme?

[Mukul]

Hi,

I want to enable dark mode on my theme so that users can turn it dark or white mode whenever they want.

But I am not finding the option to do it?

I want to enable it on Rumour Theme.

Please let me know how can I do it?

Thank you

[Tom]

Hi there,

We do not have this option at the moment.

You would have to use a custom solution or a plugin: https://wordpress.org/plugins/wp-dark-mode/

[Stephen]

Has anything changed with respect to natively enabling dark mode within the Generate Press theme?

[David]

Hi there,

Its a lot easier since GP added Global Colors. And it can be done with a little CSS.

First create your normal ( light mode ) color pallet.
And customize your site with just those colors.

For this example i will use the default color names in the GP Global Colors.
Behind the scenes GP will have generarted this CSS:

:root {
    --contrast: #252127;
    --contrast-2: #575760;
    --contrast-3: #b2b2be;
    --base: #f0f0f0;
    --base-2: #f7f8f9;
    --base-3: #ffffff;
    --accent: #ff3d6d;
}

You can see each color name is prefixed by a -- so if you create a color called primary-one the CSS variable becomes --primary-one

Now lets update the Global Colors to include our Dark Mode versions for each of our colors and we’ll prefix them with dm- so eg. dm-contrast, dm-contrast-2, dm-contrast-3 etc.

And now GP generates this CSS:

:root {
    --contrast: #252127;
    --contrast-2: #575760;
    --contrast-3: #b2b2be;
    --base: #f0f0f0;
    --base-2: #f7f8f9;
    --base-3: #ffffff;
    --accent: #ff3d6d;
    --dm-contrast: #ffffff;
    --dm-contrast-2: #f7f8f9;
    --dm-contrast-3: #f7f8f9;
    --dm-base: #b2b2be;
    --dm-base-2: #575760;
    --dm-base-3: #252127;
    --dm-accent: #ff3d6d;
}

Now we have all the colors we need for lightmode and darkmode.
To get your list of the colors, right click and inspect your site, select the Elements Tab and select the HTML Element:

Now the last piece is to add some CSS:

@media (prefers-color-scheme: dark) {
    :root {
        --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);
    }
}

All this is doing is changing our light variables for its dark mode version when the device has prefers-color-scheme: dark enabled.

So this method is completely automatic and changes based on the users browser settings.

[Stephen]

Thanks for responding and for those details. I was more wondering if it was ever going to be a setting or a feature within GP itself but I guess your response implies that we’d have to do it manually as you describe. 😐

[David]

OK – no specific dark mode feature planned, we are looking at the possibility of multiple ‘color’ pallets that could take one of the steps out of the method I provided above.

[Stephen]

Sounds good.

I tried a few plug ins however the rub with those methods is that the site logo I use has black text in it, and I couldn’t find a dark mode plug in that supports switching out the logo image (without upgrading to premium) depending if it is in “Light” or “Dark”. I’m not sure how to go about doing that. Was hoping it could be a setting of some sort within GP, which hopefully it would be if you introduced different palettes, some that are darker and would thus require a different/lighter logo treatment.

[David]

swapping logo colors is more tricky then that. What type of image file is the logo ? Be good if I could see it

[Stephen]

https://www.sgclark.com

https://www.sgclark.com/blog/wp-content/uploads/sgc_phonebooth_logo.png

I am aware that there are options where I could render my name as ‘text’ and just display the phonebooth image independently of that.

thx!

[Ying]

HI Stephen,

I don’t think there’s a good way to swap the logo color.

Maybe you can try some CSS filters:
https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_filter&preval=brightness(200%25)

[Stephen]

Which is exactly why I was wondering if GP would ever be supporting a Dark Mode option natively, as I have to believe it is possible but it would take a little bit of extra code/logic. 🙂

[Reto Jau]

Worked great for me!
It would be nice when the users can toggle darkmode on/off.

I have found this tutorial:
https://generatetweaks.ogal.dev/light-dark-mode-switcher/

Is it possible to use it with the GlobalColors Feature?

[David]

The method i proposed above, one of our users wanted a toggle:

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

and he took it a step further by storing a users decision in localStorage, see his reply here, it contains the link to that code:

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

[Stephen]

I am not the most skilled coder/developer however I gave both options a try (David’s original suggestion @ #post-2175309 as well as the enhanced suggestion @ post#-2179091) and neither worked on my site. I put the JS in the footer as well as in the page body and neither option worked. My GeneratePress implementation is a child theme and it has a lot of custom CSS (in its own CSS file) so I am 100% sure it is something on my site that is breaking these approaches. My site could use a wholesale up & down clean up and code optimization so I am not surprised that it did not work.

[Fernando]

Hi Stephen,

To test, can you try disabling non-GP plugins especially optimization plugins, and re-try if either solutions will work?

[Author]

Posts