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

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

Home Forums Support How can I enable Dark mode on theme?

  • This topic has 10 replies, 5 voices, and was last updated 3 months ago by Stephen.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1759792
    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

    #1760652
    Tom
    Lead Developer
    Lead Developer

    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/

    #2159469
    Stephen

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

    #2159902
    David
    Staff
    Customer Support

    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:

    2022-03-19_12-24-44

    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.

    #2162530
    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. ๐Ÿ˜

    #2162571
    David
    Staff
    Customer Support

    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.

    #2162584
    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.

    #2162604
    David
    Staff
    Customer Support

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

    #2162610
    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!

    #2162690
    Ying
    Staff
    Customer Support

    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)

    #2165132
    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. ๐Ÿ™‚

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.