Persistent Light/Dark Toggle in Webflow
HTML-код
- Опубликовано: 12 июл 2024
- Get the cloneable for this project (affiliate link)
webflow.grsm.io/tricks?path=n...
Get the code for this at...
github.com/timothydesign/scri...
Join my Webflow Wizards Community
/ timothyricks 
Хобби
Spent a good chunk of time trying to figure out why it wouldn't work- turns out the variable groups have be named exactly 'color' and exactly 'dark'. Is there a way for us to be able to achieve this but keep our own variable group nomenclature?
Nice Tutorial! That's also how I have implemented Dark Mode on the Client Side I've built with the First Version of LumosFramework.
I'm already hyped for V2... Great work as always Timothy :)
Thanks! This is exactly what I was waiting for!
This is amazing, thanks Timothy
Another thank you from me, Timothy. After using this successfully on a couple of sites, I understand how this all works! (Finally)
It might be useful to add for other users of your system that any colours you do not want to change can be put into another variable group (I called mine Brands) and use those on elements that retain their size and colour when the button is clicked. Works like a dream.
I've incorporated that system into the template I use for all sites - all you have to do is change the colour variables.
Any advice on how to get the toggle button to move? Only thing not working on this!
Very cool, thanks Timothy.
Very cool that this is such a simple implementation. Love it!
Question, if one wanted to have dark as the default (while retaining the auto function) would it require a script rewrite?
Thank you Timmay!
Thanks Timothy! This works great! 🙏
Great tutorial! Thank you
I always needed this
awesome plugin, man! saved my night lol
Great, thanks!
This worked great! Thank you so much. Is there a way for us to create another binary state stored in local storage? I am trying to create a toggle-able sidebar with the site remembering the states AND having the darkmode lightmode.This would be awesome ~!
Awesome tutorial! Is it possible to make white as default? And not having it being controlled by the system preferences.
I have a line of code in the Head that changes the highlight color, is there a way to have this also change with the light/dark mode toggle?
Thanks Timothy! Love your content. Is there possible to change the mode by scrolling?
Thank you! Yes, I just released a video for this. ruclips.net/video/ECCEDxNTs7c/видео.htmlsi=ebFNpgp_4E21k9HO
I’ve been waiting for a solid solution using variables, thanks! Do you know if this resolves the issue with CMS pages? I know past solutions using cookies wasn’t working with collection pages
Good question! Just tested this with CMS pages, and it works for those also.
Oh man, you make it look so easy. This is awesome.
Is there a way to keep this dark mode persistent even when site is refreshed?
Thank you! It should already be persistent on refresh
hi, thanks so much for this, @@timothyricks - the only thing is - can the mobile browser UI color theme be changed too, precisely on that click, and not just afterwards using swipe refresh?
thanks
Hi Timothy! Is there a way to trigger the switch with "Light / Dark" text links instead of a toggle like you showed?
Thank you for the tutorial😀. Is there any way to make this without the custom code? I'm designing a portfolio with a free plan so I don't have access to the custom code feature.
Thanks for great content Timothy, really amazing work. Just a question, is there a way to easily switch icon color in a project where I want to use the dark/light mode?
Thank you! Try the "SVG Import" Webflow app by Tim Daff. It allows you to link each path within an svg to different variables.
@@timothyricks Worked like a charm. Thanks again ✌🏻
@timothy I'm trying to trigger a dark mode scene In spline when the toggle is triggered is this possible? And if so what is easiest way to achieve this. I have a default light mode spline scene which needs to be swaped over when dark mode is triggered 🙏
Thank you for this, Timothy! Does this method also work for SVG icon/logo colors?
Yes it can as long as the svg is connected to font color or another variable. The SVG Import App is perfect for that. webflow.com/apps/detail/svg-import
Thanks for your quick reply and for sharing solid Webflow knowledge@@timothyricks
Thanks for sharing. Looks a lot easier to implement than one I used previously. Is there a way to use this to also change images? For example a different logo? Or is this not possible with the script as it’s only targeting variables?
Thank you! This script adds a class of dark-mode to the html element whenever the site is in dark mode. So we could use some custom css to hide light-mode-images and show dark-mode-images when that class is applied.
.light-mode-images { display: block; }
.dark-mode-images { display: none; }
html.dark-mode .light-mode-images { display: none; }
html.dark-mode .dark-mode-images { display: block; }
@@timothyricks That works perfectly. Opens up the options to change entire sections in the different modes....not that you want too!!!
@@timothyricks This is what I wanted. You are the best. Thank you!
@@timothyricks Hi!! I didn't fully understand where to place the script, and what classes should I add.... could you please explain? Thanks you!! btw. Can it work on videos as well?
@@maydanieli1493 I don't know exactly, but this works for me:
in the page settings > Before tag. Or in the custom code of the website > Before tag.
Thanks Timothy, Love your content, this method was easy for me as a beginner with code, just one question, is there a way to change the Lottie color? I have an interactive icon for my menu, and that's the unique thing that I couldn't change. Thanks in advance.
So glad this helps! Lottie files contain an SVG so we can style the paths inside them to inherit from parent font color with some CSS.
If the lottie lines are set with fills, we'd use this.
.your-lottie-class path { fill: currentColor !important; }
If they're set with strokes, we'd use this.
.your-lottie-class path { stroke: currentColor !important; }
@@timothyricks thank you so much for your help.
This is amazing! I wanted to get more functionality and your response in a comment gave me the answer. Thanks so much. Is there a way to tie Interactions to the switch between dark and light mode? Something like an element sliding down from the top. Would be amazing if the toggling back and forth would re-trigger an interaction. I've tried setting the interaction on the button itself as a trigger to animate a different element, but the elements must live in the same component (and this toggle is in the navigation bar, while my page content is separate). I thought maybe using CSS transform and applying as a custom class on each element, but can't seem to get anywhere with this... Any ideas?
Sorry I just found the answer.Following the .invert you explained in another comment, you create a class, like ".animation-test". Then create an animation name, like "slidein" and create the two keyframes as you wish. Then apply the class "animation-test" to any element on the website, and it will be triggered when clicking the toggle every time.
animation-test {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
translate: 150vw 0;
scale: 200% 1;
}
to {
translate: 0 0;
scale: 100% 1;
}
}
I was able to apply dark mode to my site in just a few hours. Thank you so much for your work. Great value.
I'd like to apply an "filter : invert" effect to a black & white logo so that it's white in dark mode and black in light mode.
Do you have any recommendation?
So glad this helps! You could add this css in an embed.
:root {
--color--invert: 0%;
--dark--invert: 100%;
}
Then apply this custom property to any elements you want to invert.
filter: invert(var(--color--invert));
And lastly, pass “invert” into the list of variables that the script should listen for
@@timothyricks THank you so much for your quick response. However, because you can add only one "Filter" in "Custom Properties", I think Webflow can't manage to switch between dark and light mode because he has only one "variable" to play with.
Im a total noob so I'm just making a hypothesis.
I followed all your steps and Webflow only read the "--color--" mode but can't switch to "--dark--" mode when I play with the toggle. I past "invert" in the original script you shared.
I'm from France so I gonna sleep my 7 hours because its 2am here - thank you !
Sure thing! We only need to apply the one filter --color--invert. The script handles animating the variable to the dark value.
A simpler option instead would be applying a class of invert-element to any element you want to invert and then adding this css in an embed.
html.dark-mode .invert-element {
filter: invert(100%);
}
@@timothyricks The second option works insanely well. You're awesome Timothy. Very glad having you in the Webflow Community
if you make this with lumos framework the js code needs only to be applyed to the dark theme of the main page I think, instead of using all those classes. How the code would change applying the toogle switcher with lumos framework?
🎉 so good. Thank you. Looks so simple. Any chance you could share the actual code?
Sure thing! The source code is part of the script in the video description.
cdn.jsdelivr.net/gh/timothydesign/scripts@v1.0.1/dark-mode-toggle.js
Hey Tim, this is working great on my site. One issue I am finding is that if I switch to dark mode the "w-nav-link w--current" does not switch the colors. Any thoughts?
Hi, have you tried applying a color variable directly to the w-current state just to make sure it’s not inheriting its color from somewhere else? As long as it’s not set using a swatch variable, all the other variables should switch regardless of what they’re applied to.
Does this still works when site code is exported by any chance ?
How can you add a moon icon on the dark and sun icon on the light is that possible?
Thank you so much. I had a quick question though is there a way to implement this type of thing but with images to like what if I have a light graphic variant and a dark graphic variant, and want them to change with the theme.
Sure thing! This script adds a class of dark-mode to the html element whenever the site is in dark mode. So we could use some custom css to hide light-mode-images and show dark-mode-images when that class is applied.
.light-mode-images { display: block; }
.dark-mode-images { display: none; }
html.dark-mode .light-mode-images { display: none; }
html.dark-mode .dark-mode-images { display: block; }
@@timothyricksThanks that’s great. 👍
One more quick question is there a way to just name your color swatches with a particular ending text so for instance -dy (for Dynamic), -lt (for Light), and -dk (for Dark) and right code that says any element with a swatch color ending in -dy automatically switch to the appropriate -lt or -dk variant that way you don’t need to manually update the code every time you create a new color swatch.
For example, color-primary-dy, color-primary-lt, and color-primary-dk if you want for instance, the background to dynamically change colors you’ll set it to the dynamic color swatch. If you want it to be only light, you’ll set it to light variant or vice versa.
I know that’s a lot, but I think this would be extremely helpful if it’s possible.
I wanted to do something similar, but sadly with js in Webflow, there’s no way to get a list of all variables or even variables starting or ending with a value. The only way to retrieve a variable is to pass in the exact variable name. Getting all styles on the document excluded variables. And our website’s css file is hosted on a Webflow domain that doesn’t match our site’s domain so JS can’t read it.
Hey Timothy, I had this working on my site for a while and then the inner button toggle movement started acting strange, resetting itself to light mode position when I toggle dark mode. All the colours work fine when I click the button, just not the movement of the inner toggle. Do you know what could be going wrong here?
I got it working, it looks like the button toggle breaks when you use a margin toggle offset below a value of 1
I Can't thank you enough Timothy! I painstakingly created an elaborate Webflow interaction only to find it does not retain its settings when you switch pages. 😣 Everything works great but my "toggle-offset" is not affected. I read that someone else had this issue and I checked my code several times before I posted. My variable names for the offsets are "toggle-offset" in their corresponding directories: dark/ and color/. My tr-color-vars="background,toggle-offset" is set in the version 1.0.2 code you provided. The background var works but not toggle-offset indicating I am connected to your CDN. 🤷🏼♂ I also have the attribute "tr-color-toggle" applied to my toggle_wrap linkblock and my "toggle_inner" has it's padding set with the variables. Any insight would be greatly appreciated. 😃
Hi, so glad this helps! I’m sorry you’re running into this issue. Did you apply the toggle-offset variable as left margin to your toggle div?
@@timothyricks I apologize. I included my read-only link in my previous response, and I don't believe that's allowed. Yes, I do have that set correctly.
I'm finally becoming a Patreon! I owe it to you.
I'm returning to express my gratitude for the assistance I received from Timothy through his patron account. Also to clarify the issue, and include the remedy.
My issue was regarding a space in a code snippet after "tr-color-vars=“background, toggle-offset”. This should be no space between “background” and “toggle-offset.”
Thank you once again, Timothy!
How would I do this but with dark mode as the native mode
Reverse the color swatches!
I think there is a weird bug when a linkblock or button has :current state active. the color does not change when toggling darkmode. I have color/background-active and dark/background-active variables for the :current state's styles, and the correct color appears on light mode, but when I go to dark mode it stays the same color. Every other variable changes correctly except the current state
Hi, I'm sorry you're running into this issue! You're the second person to mention this. So I just did a quick test, but for me the current state is working correctly both for background and font color on the links. Are you applying the color/background-active variable directly to the current state?
I tried to attach a loom and read-only link but I think RUclips auto deletes
How can I apply this to Lumos 2.0?
What if I need to change colors on the sections and not in the body? Is there a solution?
apply the variables to the only the sections background color
@@rylan20311 Thank you!
@timothy ive followed your tutorial but cant seem to get the toggle to activate and change to dark mode :(
Hi, I’m sorry to hear that! This uses JavaScript so it will only work on the published site, not in Webflow preview. Variables should be in folders of color/ and dark/ and the variable names shouldn’t have spaces or capital letters.
@@timothyricks checked all these all seem correct the toggle doesn't seem to activate when i publish the site
Oh, I see! It’s hard to debug further without digging into the project. Other than that, I would make sure the correct attribute is on the toggle, the variables are applied to the toggle, and the code is in the site settings. The cloneable is a working version to compare against.
@@timothyricks found this issue spaces between the variables on my script ooopppss
Oh, awesome! Glad you got it working!
Hi there, I'm an aspiring webflow developer. I can't access custom code with my free plan. As a webflow dev. do i need to upgrade my plan, or is there a way around it for webflow devs.
Hi, as far as I know, there’s no way to get around that limit without purchasing a plan sadly.
@@timothyricks thanks
Hey guys I followed the tutorial but it doesn't seem to work for me. Any ideas on what I might did wrong?
it's the same for me. Can you tell me how you solved this problem?
how to do it for images such as logos?
I like to use the SVG Import App for Webflow. It sets fills and strokes to currentColor so they respect both light and dark mode automatically.
addListener is kinda depricated, no?
Good point! I updated the script
i clone the site but the button wouldn't work. someone help!!!!!!!
having the same issue
Hi, this uses JavaScript so it will only work on the published site, not in Webflow preview.