Persistent Light/Dark Toggle in Webflow

  Рет қаралды 15,339

Timothy Ricks

Timothy Ricks

Күн бұрын

Пікірлер: 109
@dfpcmaia
@dfpcmaia 6 ай бұрын
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?
@michyarry
@michyarry 16 күн бұрын
Whoa, that was super easy. Thanks, man!
@hyweljthomas
@hyweljthomas 7 ай бұрын
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.
@samanthavolpe183
@samanthavolpe183 7 ай бұрын
Any advice on how to get the toggle button to move? Only thing not working on this!
@We.are.robots
@We.are.robots 7 ай бұрын
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?
@santiagoramos9442
@santiagoramos9442 2 ай бұрын
Have the same question. Did you find a way to do it? Thanks in advance.
@We.are.robots
@We.are.robots 2 ай бұрын
@@santiagoramos9442 Unfortunately not! I believe it would need to be a different script !
@santiagoramos9442
@santiagoramos9442 2 ай бұрын
@@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.
@sanderson92
@sanderson92 10 ай бұрын
Thanks! This is exactly what I was waiting for!
@sebdiable
@sebdiable 8 ай бұрын
This is amazing, thanks Timothy
@oproductdesigner
@oproductdesigner 3 ай бұрын
awesome plugin, man! saved my night lol
@leonstoel9028
@leonstoel9028 10 ай бұрын
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 :)
@ziggerwebdesign1704
@ziggerwebdesign1704 10 ай бұрын
Very cool, thanks Timothy.
@varadpatil3978
@varadpatil3978 10 ай бұрын
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?
@timothyricks
@timothyricks 10 ай бұрын
Thank you! It should already be persistent on refresh
@vojtechhasalik9615
@vojtechhasalik9615 8 ай бұрын
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?​
@jeppevolander9751
@jeppevolander9751 7 ай бұрын
Awesome tutorial! Is it possible to make white as default? And not having it being controlled by the system preferences.
@DANNFIGDESIGNS
@DANNFIGDESIGNS 9 ай бұрын
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. 😃
@timothyricks
@timothyricks 9 ай бұрын
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?
@DANNFIGDESIGNS
@DANNFIGDESIGNS 9 ай бұрын
@@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.
@DANNFIGDESIGNS
@DANNFIGDESIGNS 9 ай бұрын
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!
@AzharBhagas
@AzharBhagas 8 ай бұрын
Great tutorial! Thank you
@benjamintenyson2668
@benjamintenyson2668 10 ай бұрын
I always needed this
@pelangos
@pelangos 10 ай бұрын
Thank you Timmay!
@AurelienSchibli
@AurelienSchibli 10 ай бұрын
🎉 so good. Thank you. Looks so simple. Any chance you could share the actual code?
@timothyricks
@timothyricks 10 ай бұрын
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
@silvansoeters
@silvansoeters 8 ай бұрын
Thanks Timothy! This works great! 🙏
@WilliamSayer
@WilliamSayer 2 ай бұрын
I'm really excited to implement this... but what if we want to use more than 4 colors??? 🤔
@timothyricks
@timothyricks 2 ай бұрын
There’s no limit to the number of colors. More colors can be added just like the existing ones 🙂
@gustavosmusic
@gustavosmusic 3 ай бұрын
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?
@gustavosmusic
@gustavosmusic 3 ай бұрын
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_t7031
@kai_t7031 21 күн бұрын
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?
@duzda
@duzda 10 күн бұрын
What if we want to use our own variables structure? What we need to change in the script/code?
@drewcolby857
@drewcolby857 6 ай бұрын
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?
@ericbaik9746
@ericbaik9746 7 ай бұрын
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 ~!
@dab299
@dab299 10 ай бұрын
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?
@timothyricks
@timothyricks 10 ай бұрын
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; }
@dab299
@dab299 10 ай бұрын
@@timothyricks That works perfectly. Opens up the options to change entire sections in the different modes....not that you want too!!!
@springhope2742
@springhope2742 9 ай бұрын
@@timothyricks This is what I wanted. You are the best. Thank you!
@maydanieli1493
@maydanieli1493 5 ай бұрын
​@@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?
@IkevanGerven
@IkevanGerven 3 ай бұрын
@@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.
@andresochoa3040
@andresochoa3040 3 ай бұрын
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?
@messjerem
@messjerem 7 ай бұрын
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?
@timothyricks
@timothyricks 7 ай бұрын
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
@messjerem
@messjerem 7 ай бұрын
@@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 !
@timothyricks
@timothyricks 7 ай бұрын
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%); }
@messjerem
@messjerem 7 ай бұрын
@@timothyricks The second option works insanely well. You're awesome Timothy. Very glad having you in the Webflow Community
@elmoks__
@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-dn1vq
@Andy-dn1vq 7 күн бұрын
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)
@taywoo8216
@taywoo8216 10 ай бұрын
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
@timothyricks
@timothyricks 10 ай бұрын
Good question! Just tested this with CMS pages, and it works for those also.
@helwingvillamizar5064
@helwingvillamizar5064 6 ай бұрын
Thank you for this, Timothy! Does this method also work for SVG icon/logo colors?
@timothyricks
@timothyricks 6 ай бұрын
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
@helwingvillamizar5064
@helwingvillamizar5064 6 ай бұрын
Thanks for your quick reply and for sharing solid Webflow knowledge@@timothyricks
@laurenn7022
@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!
@bbbbbbbb820
@bbbbbbbb820 10 ай бұрын
Great, thanks!
@tomaskrynsky3552
@tomaskrynsky3552 10 ай бұрын
Thanks Timothy! Love your content. Is there possible to change the mode by scrolling?
@timothyricks
@timothyricks 9 ай бұрын
Thank you! Yes, I just released a video for this. kzbin.info/www/bejne/e3Smdneug7mmbcUsi=ebFNpgp_4E21k9HO
@angelicojohnrago2878
@angelicojohnrago2878 3 ай бұрын
How can you add a moon icon on the dark and sun icon on the light is that possible?
@VitHoangf
@VitHoangf 7 ай бұрын
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.
@christiangoran6621
@christiangoran6621 6 ай бұрын
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?
@timothyricks
@timothyricks 6 ай бұрын
Thank you! Try the "SVG Import" Webflow app by Tim Daff. It allows you to link each path within an svg to different variables.
@christiangoran6621
@christiangoran6621 6 ай бұрын
@@timothyricks Worked like a charm. Thanks again ✌🏻
@Deanfyi
@Deanfyi 10 ай бұрын
How would I do this but with dark mode as the native mode
@sanskarsingh4938
@sanskarsingh4938 10 ай бұрын
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.
@timothyricks
@timothyricks 6 ай бұрын
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.
@lessofchristian
@lessofchristian 4 ай бұрын
How can I apply this to Lumos 2.0?
@Kayzee12
@Kayzee12 Ай бұрын
can I do this without custom code ?
@blackknights2815
@blackknights2815 7 ай бұрын
Hi Timothy! Is there a way to trigger the switch with "Light / Dark" text links instead of a toggle like you showed?
@rylan20311
@rylan20311 8 ай бұрын
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
@timothyricks
@timothyricks 8 ай бұрын
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?
@rylan20311
@rylan20311 8 ай бұрын
I tried to attach a loom and read-only link but I think KZbin auto deletes
@w0lfHD
@w0lfHD 7 ай бұрын
thanks
@jpferreiracreativeltd4308
@jpferreiracreativeltd4308 8 ай бұрын
@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 🙏
@markomilosavljevic7272
@markomilosavljevic7272 6 ай бұрын
Hey guys I followed the tutorial but it doesn't seem to work for me. Any ideas on what I might did wrong?
@zalkar-info
@zalkar-info 4 ай бұрын
it's the same for me. Can you tell me how you solved this problem?
@ejikembaekwe1604
@ejikembaekwe1604 2 ай бұрын
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.
@timothyricks
@timothyricks 2 ай бұрын
Hi, as far as I know, there’s no way to get around that limit without purchasing a plan sadly.
@ejikembaekwe1604
@ejikembaekwe1604 2 ай бұрын
@@timothyricks thanks
@viktorekstrom4398
@viktorekstrom4398 3 ай бұрын
how to do it for images such as logos?
@timothyricks
@timothyricks 3 ай бұрын
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-dp7uj
@George-dp7uj 8 ай бұрын
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-dp7uj
@George-dp7uj 8 ай бұрын
I got it working, it looks like the button toggle breaks when you use a margin toggle offset below a value of 1
@jerryol
@jerryol 9 ай бұрын
Does this still works when site code is exported by any chance ?
@loyaldesignco
@loyaldesignco 9 ай бұрын
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?
@timothyricks
@timothyricks 9 ай бұрын
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.
@SethBabcock
@SethBabcock 9 ай бұрын
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.
@timothyricks
@timothyricks 9 ай бұрын
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; }
@SethBabcock
@SethBabcock 9 ай бұрын
@@timothyricksThanks that’s great. 👍
@SethBabcock
@SethBabcock 9 ай бұрын
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.
@timothyricks
@timothyricks 9 ай бұрын
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.
@tohauk18
@tohauk18 8 ай бұрын
What if I need to change colors on the sections and not in the body? Is there a solution?
@rylan20311
@rylan20311 8 ай бұрын
apply the variables to the only the sections background color
@tohauk18
@tohauk18 8 ай бұрын
@@rylan20311 Thank you!
@Bars_Sl
@Bars_Sl 9 ай бұрын
addListener is kinda depricated, no?
@timothyricks
@timothyricks 9 ай бұрын
Good point! I updated the script
@jpferreiracreativeltd4308
@jpferreiracreativeltd4308 10 ай бұрын
@timothy ive followed your tutorial but cant seem to get the toggle to activate and change to dark mode :(
@timothyricks
@timothyricks 10 ай бұрын
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.
@jpferreiracreativeltd4308
@jpferreiracreativeltd4308 10 ай бұрын
@@timothyricks checked all these all seem correct the toggle doesn't seem to activate when i publish the site
@timothyricks
@timothyricks 10 ай бұрын
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.
@jpferreiracreativeltd4308
@jpferreiracreativeltd4308 10 ай бұрын
@@timothyricks found this issue spaces between the variables on my script ooopppss
@timothyricks
@timothyricks 10 ай бұрын
Oh, awesome! Glad you got it working!
@sezyboii
@sezyboii 10 ай бұрын
i clone the site but the button wouldn't work. someone help!!!!!!!
@jpferreiracreativeltd4308
@jpferreiracreativeltd4308 10 ай бұрын
having the same issue
@timothyricks
@timothyricks 10 ай бұрын
Hi, this uses JavaScript so it will only work on the published site, not in Webflow preview.
@davidfitcher2953
@davidfitcher2953 10 ай бұрын
Webflow's New Pointer Events Explained
0:59
Timothy Ricks
Рет қаралды 6 М.
Builder for WebGL-Like Effects Using SVG Filters in Webflow
15:24
Timothy Ricks
Рет қаралды 6 М.
Как мы играем в игры 😂
00:20
МЯТНАЯ ФАНТА
Рет қаралды 3,4 МЛН
когда не обедаешь в школе // EVA mash
00:51
EVA mash
Рет қаралды 4,1 МЛН
Life hack 😂 Watermelon magic box! #shorts by Leisi Crazy
00:17
Leisi Crazy
Рет қаралды 73 МЛН
GSAP & ScrollTrigger Crash Course for Webflow
16:09
Timothy Ricks
Рет қаралды 38 М.
New: Webflow Variables
8:03
Timothy Ricks
Рет қаралды 24 М.
how dark mode killed good design
13:13
Answer in Progress
Рет қаралды 932 М.
Webflow Dark Mode Toggle with Lumos 2
5:31
Christian Beatty
Рет қаралды 238
Work Smarter Than 99% of Webflow Developers
3:34
Timothy Ricks
Рет қаралды 17 М.
No. 59 - Learning Lumos w/ @timothyricks
54:19
Flow Party
Рет қаралды 7 М.
Dark mode with TailwindCSS in under 7 minutes
6:58
Built With Code
Рет қаралды 37 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 965 М.
I redesigned YOUR websites
20:44
DesignSpo
Рет қаралды 31 М.