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?
@michyarry16 күн бұрын
Whoa, that was super easy. Thanks, man!
@hyweljthomas7 ай бұрын
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.
@samanthavolpe1837 ай бұрын
Any advice on how to get the toggle button to move? Only thing not working on this!
@We.are.robots7 ай бұрын
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?
@santiagoramos94422 ай бұрын
Have the same question. Did you find a way to do it? Thanks in advance.
@We.are.robots2 ай бұрын
@@santiagoramos9442 Unfortunately not! I believe it would need to be a different script !
@santiagoramos94422 ай бұрын
@@We.are.robots I just opted to keep the name variables but invert the values so it takes the dark colors as the default. Just take note of it to avoid confusion and it will be ok.
@sanderson9210 ай бұрын
Thanks! This is exactly what I was waiting for!
@sebdiable8 ай бұрын
This is amazing, thanks Timothy
@oproductdesigner3 ай бұрын
awesome plugin, man! saved my night lol
@leonstoel902810 ай бұрын
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 :)
@ziggerwebdesign170410 ай бұрын
Very cool, thanks Timothy.
@varadpatil397810 ай бұрын
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?
@timothyricks10 ай бұрын
Thank you! It should already be persistent on refresh
@vojtechhasalik96158 ай бұрын
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?
@jeppevolander97517 ай бұрын
Awesome tutorial! Is it possible to make white as default? And not having it being controlled by the system preferences.
@DANNFIGDESIGNS9 ай бұрын
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. 😃
@timothyricks9 ай бұрын
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?
@DANNFIGDESIGNS9 ай бұрын
@@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.
@DANNFIGDESIGNS9 ай бұрын
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!
@AzharBhagas8 ай бұрын
Great tutorial! Thank you
@benjamintenyson266810 ай бұрын
I always needed this
@pelangos10 ай бұрын
Thank you Timmay!
@AurelienSchibli10 ай бұрын
🎉 so good. Thank you. Looks so simple. Any chance you could share the actual code?
@timothyricks10 ай бұрын
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
@silvansoeters8 ай бұрын
Thanks Timothy! This works great! 🙏
@WilliamSayer2 ай бұрын
I'm really excited to implement this... but what if we want to use more than 4 colors??? 🤔
@timothyricks2 ай бұрын
There’s no limit to the number of colors. More colors can be added just like the existing ones 🙂
@gustavosmusic3 ай бұрын
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?
@gustavosmusic3 ай бұрын
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; } }
@kai_t703121 күн бұрын
Is there an easy way to select sections that should be affected? For example, so that my customer can decide which sections should switch colors just by adding a custom attribute or something like that to the section?
@duzda10 күн бұрын
What if we want to use our own variables structure? What we need to change in the script/code?
@drewcolby8576 ай бұрын
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?
@ericbaik97467 ай бұрын
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 ~!
@dab29910 ай бұрын
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?
@timothyricks10 ай бұрын
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; }
@dab29910 ай бұрын
@@timothyricks That works perfectly. Opens up the options to change entire sections in the different modes....not that you want too!!!
@springhope27429 ай бұрын
@@timothyricks This is what I wanted. You are the best. Thank you!
@maydanieli14935 ай бұрын
@@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?
@IkevanGerven3 ай бұрын
@@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.
@andresochoa30403 ай бұрын
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?
@messjerem7 ай бұрын
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?
@timothyricks7 ай бұрын
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
@messjerem7 ай бұрын
@@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 !
@timothyricks7 ай бұрын
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%); }
@messjerem7 ай бұрын
@@timothyricks The second option works insanely well. You're awesome Timothy. Very glad having you in the Webflow Community
@elmoks__Ай бұрын
Thank you for this great tutorial Timothy. I tried using your code, but I have a serious problem with the implementation. The Javascript function only reads the first color variable and ignores all the other variables I imputed. Hence, only the background color which is the first variable inputed changes upon toggle. What could be the problem and the solution to this?
@Andy-dn1vq7 күн бұрын
Try avoiding adding spaces after the comas. Happened to me too, turns out it doesn't work ( well, works only for first input if you have spaces)
@taywoo821610 ай бұрын
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
@timothyricks10 ай бұрын
Good question! Just tested this with CMS pages, and it works for those also.
@helwingvillamizar50646 ай бұрын
Thank you for this, Timothy! Does this method also work for SVG icon/logo colors?
@timothyricks6 ай бұрын
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
@helwingvillamizar50646 ай бұрын
Thanks for your quick reply and for sharing solid Webflow knowledge@@timothyricks
@laurenn7022Ай бұрын
I'm curious if you'll see this! I implemented this dark mode toggle on my site (amazingly easy and fast, thank you!) but i'm encountering a funny bug when my site navigation is using a hamburger menu. basically, the click on the menu and the click on the toggle conflict with each other, and my nav bar will end up in dark mode with the rest of my site in light mode, and vice versa. I've tried many things, like z-index layering, repositioning the button at mobile breakpoints... but i'm not sure what is happening lol I'm curious if you have any ideas here!
@bbbbbbbb82010 ай бұрын
Great, thanks!
@tomaskrynsky355210 ай бұрын
Thanks Timothy! Love your content. Is there possible to change the mode by scrolling?
@timothyricks9 ай бұрын
Thank you! Yes, I just released a video for this. kzbin.info/www/bejne/e3Smdneug7mmbcUsi=ebFNpgp_4E21k9HO
@angelicojohnrago28783 ай бұрын
How can you add a moon icon on the dark and sun icon on the light is that possible?
@VitHoangf7 ай бұрын
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.
@christiangoran66216 ай бұрын
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?
@timothyricks6 ай бұрын
Thank you! Try the "SVG Import" Webflow app by Tim Daff. It allows you to link each path within an svg to different variables.
@christiangoran66216 ай бұрын
@@timothyricks Worked like a charm. Thanks again ✌🏻
@Deanfyi10 ай бұрын
How would I do this but with dark mode as the native mode
@sanskarsingh493810 ай бұрын
Reverse the color swatches!
6 ай бұрын
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.
@timothyricks6 ай бұрын
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; }
6 ай бұрын
@@timothyricks thank you so much for your help.
@lessofchristian4 ай бұрын
How can I apply this to Lumos 2.0?
@Kayzee12Ай бұрын
can I do this without custom code ?
@blackknights28157 ай бұрын
Hi Timothy! Is there a way to trigger the switch with "Light / Dark" text links instead of a toggle like you showed?
@rylan203118 ай бұрын
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
@timothyricks8 ай бұрын
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?
@rylan203118 ай бұрын
I tried to attach a loom and read-only link but I think KZbin auto deletes
@w0lfHD7 ай бұрын
thanks
@jpferreiracreativeltd43088 ай бұрын
@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 🙏
@markomilosavljevic72726 ай бұрын
Hey guys I followed the tutorial but it doesn't seem to work for me. Any ideas on what I might did wrong?
@zalkar-info4 ай бұрын
it's the same for me. Can you tell me how you solved this problem?
@ejikembaekwe16042 ай бұрын
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.
@timothyricks2 ай бұрын
Hi, as far as I know, there’s no way to get around that limit without purchasing a plan sadly.
@ejikembaekwe16042 ай бұрын
@@timothyricks thanks
@viktorekstrom43983 ай бұрын
how to do it for images such as logos?
@timothyricks3 ай бұрын
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.
@George-dp7uj8 ай бұрын
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?
@George-dp7uj8 ай бұрын
I got it working, it looks like the button toggle breaks when you use a margin toggle offset below a value of 1
@jerryol9 ай бұрын
Does this still works when site code is exported by any chance ?
@loyaldesignco9 ай бұрын
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?
@timothyricks9 ай бұрын
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.
@SethBabcock9 ай бұрын
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.
@timothyricks9 ай бұрын
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; }
@SethBabcock9 ай бұрын
@@timothyricksThanks that’s great. 👍
@SethBabcock9 ай бұрын
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.
@timothyricks9 ай бұрын
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.
@tohauk188 ай бұрын
What if I need to change colors on the sections and not in the body? Is there a solution?
@rylan203118 ай бұрын
apply the variables to the only the sections background color
@tohauk188 ай бұрын
@@rylan20311 Thank you!
@Bars_Sl9 ай бұрын
addListener is kinda depricated, no?
@timothyricks9 ай бұрын
Good point! I updated the script
@jpferreiracreativeltd430810 ай бұрын
@timothy ive followed your tutorial but cant seem to get the toggle to activate and change to dark mode :(
@timothyricks10 ай бұрын
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.
@jpferreiracreativeltd430810 ай бұрын
@@timothyricks checked all these all seem correct the toggle doesn't seem to activate when i publish the site
@timothyricks10 ай бұрын
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.
@jpferreiracreativeltd430810 ай бұрын
@@timothyricks found this issue spaces between the variables on my script ooopppss
@timothyricks10 ай бұрын
Oh, awesome! Glad you got it working!
@sezyboii10 ай бұрын
i clone the site but the button wouldn't work. someone help!!!!!!!
@jpferreiracreativeltd430810 ай бұрын
having the same issue
@timothyricks10 ай бұрын
Hi, this uses JavaScript so it will only work on the published site, not in Webflow preview.