Light and dark mode

[abdurrehman]

Hello,

I have created a website and that’s just in the light and I was wondering how to add the dark mode support as well so we could use the .dark classes and when the toggle button is clicked then show the dark theme? How do I do it?

Thanks

[prakash_s]

Hello @abdurrehman,

Thanks for writing to us.

The features you are requesting would require custom development. I recommend reaching out to a developer who can assist you with your specific needs. Alternatively, you may consider subscribing to One, where customization questions are supported and answered. Please note that providing custom development support is beyond the scope of our standard support services.

Thanks for understanding

[abdurrehman]

I know that but you didn’t even bother to tell how this could be done with it as the Pro is ultimate theme as you claim but it appears that’s just trap and what actually is the One, a custom dev platform. @christian and other guys are always helpful at least guide the way to that, how it can be done.

[ruenel]

Hey @abdurrehman,

You would need to add a toggle in your header, custom CSS and a little bit of Javascript code. Check out this example:

• https://codepen.io/Umer_Farooq/pen/eYJgKGN

With the modern browser, there are ways to apply light and dark mode as well. This article should be able to help you understand if you may want to apply it to your site.

• https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

If you want to get more into this, TailwindCSS can be of use. Be aware that this would need to have an intermediate or advanced coding skills.

Best Regards.

[abdurrehman]

Hi,

Using the JavaScript I could add the toggle button and trigger the class .dark to the HTML document but the thing that I didn’t get about adding the bg or other things for example cornerstore has the option to add the background but how to trigger for the dark for example when it has the dark class then how that would show? like instead of light show the dark one? TBH, with the tailwind is simple and straightforward but I’m having hard time with Pro as it’s the page builder.

[tristup]

Hi @abdurrehman,

It is not about adding a Toggle Button — you will need to use JavaScript to add the appropriate class (dark or light) to the body element. This will change the colors of the child elements based on the parent hierarchy class.
The following thread explains this process in more detail:

Light/dark theme global colors

Hi @striata, Thanks for reaching out. You can make global CSS color values respond to the preferred color scheme ( light or dark mode ) set in their browser. You need to use the prefers-color-scheme media query in CSS. In the CSS, you can define :root { --background-color: #ffffff; --text-color: #000000; } @media (prefers-color-scheme: dark) { :root { --background-color: #121212; --text-color: #ffffff; } } And you can implement it like the following, so base…

If you encounter any issues during implementation, feel free to reach out to us for further assistance.
Please note that custom coding is beyond the scope of Theme Support, and the code provided in the above thread is only an example to get you started.

Thanks

[abdurrehman]

Could you please create an example of that over here to have a look? I’ve shared the credentials above.

[tristup]

Hi @abdurrehman ,

Unfortunately, creating examples falls under customization, which is beyond the scope of Theme Support . However, if you encounter any issues while implementing it, please let us know — we’re here to assist you.

Thanks

[abdurrehman]

Have a look at the page and when it’s clicked then how could we swap the icon with moon? and how to trigger the dark class that could show the styles on the page’s elements?