Dark mode is not switching back to it's original state

Design help Custom code
1

Hello folks,
I came across one difficult thing, I am trying to add a light & dark mode in my website, @tricks created a awsome simple tutorial regarding this. But it turn sucessfully into light version, but it doesn’t go back into dark version. The main version we have is dark.

You can access this dark & light mode through toggle in bottom right cornor of the website.

Tutorial link: https://www.youtube.com/watch?v=grA47dBXzPg
Readonly link to site: Webflow - Kraftelite

Can you have a look @memetican please

Can you guys please help me with this, any input will be really appericated.
Thanks

2

Hello @Parikalpana_Designs,
I think your site is not working as in the tutorial because you don’t have the same names for your variables. The code from the tutorial is looking for the variables background, text, button-background, button-text, toggle-offset(this one you don’t need). I see that you have Background and Text, but I think you have to use lower case, I think it has to be exactly as in the header code. I hope this helps.

3

Hey, thanks for your input.
I did that I tried that, but still the same. Now I have removed the code still some section changing color when I press that button

That’s weried & hard to understand how to do and what to do.

When I tried to do the same as suggested, it still behaves but only changes certain sections or elements, for eg you can see the client logo color changing but the background color where I have applied it’s not changing.

Initally from dark it was switing to light, but now when I put entire thing into light mode it won’t switch to dark.

Attachinf link to loom so you can unserstand better: Troubleshooting Display Issues | Loom

4

Hello @Parikalpana_Designs, yes so you have some conflicting code on the head of your page settings, just remove that code and with names that you have now for your variables, follow the steps of the tutorial and it should work for you. I hope this helps.

5

Hi. I have not gone through the problem you described yet.

You might want to check out the S2 Framework, which includes a powerful and easy-to-use Light / Dark Mode switching feature built on Webflow’s variable modes. It’s super simple to set up, and almost no additional configuration is needed after setup.

The mode (theme) switching UI: UI Elements | S2 Framework

In case you are not using S2, here are the steps to enjoy it:

Step 0

Set your dark mode colors as a new mode (but not variables under the base mode).

Step 1

Clone the S2 Framework, and copy the entire Light / Dark Mode Switching section to your site. You may keep it somewhere hidden.

Set up the u-light-mode and u-dark-mode utility classes so that the correct Color mode is selected for each of the classes.

Step 2

Put the below in your site’s head code (it can also be found in S2’s global head code):

<!-- Light / Dark Mode Switching by the S2 Framework -->
<!-- To Apply Light / Dark Mode (Theme) -->
<link rel="preload" href="https://cdn.jsdelivr.net/gh/SPACESODA/S2-Framework@2.3.8/webflow/js/mode-apply.min.js" as="script">
<script src="https://cdn.jsdelivr.net/gh/SPACESODA/S2-Framework@2.3.8/webflow/js/mode-apply.min.js" defer></script>
<!-- Mode Switching Function -->
<link rel="preload" href="https://cdn.jsdelivr.net/gh/SPACESODA/S2-Framework@2.3.8/webflow/js/mode-switching.min.js" as="script">
<script src="https://cdn.jsdelivr.net/gh/SPACESODA/S2-Framework@2.3.8/webflow/js/mode-switching.min.js" defer></script>

Step 3

Include the below custom CSS in a “Global code” component of your pages:

/* toggle ui */
.toggle:active .toggle-button { width: 1.85em; }

/* mode switching ui */
/* toggle style */
body.u-dark-mode .toggle { justify-content: flex-end; }
/* mode-switch style */
:root {
	--light-mode-on: rgba(255, 255, 255, 0.55);
	--dark-mode-on: rgba(0, 0, 0, 0.35);
}
body.u-system-mode .mode-switch [data-button]:not([data-button="color-mode-system"]) { background-color: transparent; }
body.u-system-mode.u-light-mode .mode-switch [data-button="color-mode-system"] { background-color: var(--light-mode-on); }
body.u-system-mode.u-dark-mode .mode-switch [data-button="color-mode-system"] { background-color: var(--dark-mode-on); }
body.u-light-mode .mode-switch [data-button="color-mode-light"] { background-color: var(--light-mode-on); }
body.u-dark-mode .mode-switch [data-button="color-mode-dark"] { background-color: var(--dark-mode-on); }
body.u-light-mode .mode-switch .mode-switch_button:hover {
	background-color: rgba(170, 170, 170, 1); color: rgba(240, 240, 240, 1);
}
body.u-dark-mode .mode-switch .mode-switch_button:hover {
	background-color: rgba(210, 210, 210, 1); color: rgba(130, 130, 130, 1);
}

Step 4

Add the class body to Body of each page.

That’s it — done!

You can customize the toggle styles and buttons, or use your own buttons by applying the right data-button="" attributes, to match your design.

1 Like