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?
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.
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?
@@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.
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 :)
Hey Timothy, thanks for your tutorial! super easy to follow and implement. I did as what you instructed here, but I got a problem = my "body" element doesn't change color when i click the toggle, while the other element -text, button bgcolor, button text- all can change color. I am using a "Markething" template for my site. Any idea?
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?
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?
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
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?
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 ~!
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?
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 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!
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; } }
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.
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!
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%); }
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 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?
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?
@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 🙏
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 UA-cam auto deletes
7 місяців тому
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; }
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
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?
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.
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.
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; }
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.
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.
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.
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?
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!
Whoa, that was super easy. Thanks, man!
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?
Have the same question. Did you find a way to do it? Thanks in advance.
@@santiagoramos9442 Unfortunately not!
I believe it would need to be a different script !
@@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.
This is amazing, thanks Timothy
Thanks! This is exactly what I was waiting for!
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 :)
Very cool, thanks Timothy.
Hey Timothy, thanks for your tutorial! super easy to follow and implement. I did as what you instructed here, but I got a problem = my "body" element doesn't change color when i click the toggle, while the other element -text, button bgcolor, button text- all can change color. I am using a "Markething" template for my site. Any idea?
awesome plugin, man! saved my night lol
Awesome tutorial! Is it possible to make white as default? And not having it being controlled by the system preferences.
Great tutorial! Thank you
Thanks Timothy! This works great! 🙏
I always needed this
Thank you Timmay!
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?
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?
What if we want to use our own variables structure?
What we need to change in the script/code?
I'm really excited to implement this... but what if we want to use more than 4 colors??? 🤔
There’s no limit to the number of colors. More colors can be added just like the existing ones 🙂
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?
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
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?
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)
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 ~!
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?
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!
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;
}
}
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.
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!
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
Hi Timothy! Is there a way to trigger the switch with "Light / Dark" text links instead of a toggle like you showed?
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 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 🙏
Great, thanks!
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 UA-cam auto deletes
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.
🎉 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
How can you add a moon icon on the dark and sun icon on the light is that possible?
Thanks Timothy! Love your content. Is there possible to change the mode by scrolling?
Thank you! Yes, I just released a video for this. ua-cam.com/video/ECCEDxNTs7c/v-deo.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.
can I do this without custom code ?
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
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 can I apply this to Lumos 2.0?
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.
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
How would I do this but with dark mode as the native mode
Reverse the color swatches!
thanks
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!
Does this still works when site code is exported by any chance ?
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.
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.
@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!
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.