How to Make a Light/Dark Mode Toggle for Your Webflow Website Using CSS & Wized.

in today's video we're going to learn how to build the most important feature of all a dark mode light mode switch we're going to be building this with web flow and whis all right let's get [Music] started in webflow I have the client first official starter project opened and if we go to the variables panel you can see here that we have swatches or colors these are just primitive so to say we just have basically the hex code as a value here we have our brand colors our neutrals and System colors or color system finally we are having semantic variables that are connected to these values so primary is connected to this color over here secondary is connected to this blue color over here we have link colors text colors Etc all right with that out of the way we first have to make sure that all of our elements are connected to the semantic values so here we have background primary here we have primary light and for the text we're having text color alternate okay now we're going to build our light mode these are the only colors that will be changing but if you're having more colors that's okay just make sure to add all of them to your light mode so we're going to open the variables panel here I'm going to create a new color variable and I'm going to call it light mode background color primary like so then I'm going to create light mode background color primary light like that and finally we have light mode text color alternate perfect now I'm going to bind those colors to the Primitive values so background color primary is going to be white background color primary light is going to be a light gray I'm going to choose this color over here neutral lightest and finally we have text color alternate and I'm going to choose a dark color for that so I'm going to go to my neutral Shades and I'm going to choose neutral darkest now I'm going to open the global Styles embed and I'm going to write some CSS the first thing we're going to do here is listen to the user's system preferences whether the user prefers a dark theme or a light theme in their device so here we're going to write a media query for that prefers color theme light oh I have a typo here it's not color theme but color scheme all right and here we're going to override the variable values in the body tag let's now go to our variables and let's copy the variable names here okay I'll save the changes I'll go to variables I'll copy the background color primary variable primary light and text color Alternet and now I'm going to paste them in here and we have text color okay now I'm going to delete this I don't need the VAR keyword and I'm going to assign values here now if you're wondering which values are we going to assign here it's going to be the values from our light mode so we can go back to our variables panel copy the light mode colors or the light mode variables so we have background color primary primary light text color alternate and we're going to paste them into our embed primary primary light and Alternate and of course we can't forget the semicolon perfect and now in the background you can see that the theme changed that's because on my device I have light mode as the preferred option if I change this in the theme settings you can see that the website is switching the theme as well pretty cool but we're not going to stop here we also have to allow users to toggle between dark mode and light mode and we don't want them to go to their system settings and toggle it there we we want them to toggle this on our site so the way we're going to do that is first by writing some CSS that's just going to listen to the attribute that's applied to the body tag and then later we're going to use WIS to build the toggling logic so let's get back to our Global Styles embed and let's write all of the CSS that's needed since we said we're going to use an attribute of theme that's what we're going to Target here so for theme light we're going to to have the same logic that we have here we can copy these three values and paste them in here perfect and now if I switch back to dark mode and I add theme light here you can see that the theme is switching dark or any other value is going to set the theme to dark and if the value is light we're going to have our light mode on cool but there's some more logic that we can add here we can also hide the icons so for example we have here a dark mode icon and a light mode icon and they're and wrapped in the same naving element and then we have here the theme reset button which is also a link element so what we want to do here is display only one icon at a time and we can do that quite simply so I added here a combo class to the icon so we have icon theme and we have here is dark and is light so I'm going to go back to the global Styles embed and I'm going to write some logic that hides the icon that's not supposed to be visible so here inside of this media query I'm going to write is dark sorry is light display none and we're going to do the same thing for the nested is Light Element of the theme light parent so we're going to copy our selector here we're going to write dot is light display none and now we have to add a little bit more logic we basically have to do the same thing for dark mode but we're not just going to be assigning values for the variables we're only going to be switching this display property here so I'm going to paste this I'm going to write here dark all right and in here I'm going to set is dark to display none and again we're going to do the same thing with this so here I'm going to paste this selector down here and I'm going to write Here theme dark and is dark display none perfect and now if I select the body and I remove this attribute you can see here that we are displaying the light icon when the theme is set to dark and if I switch the theme you can see that the icon is switching as well but you might have noticed we're having one problem and that is when the body is selected if we write Here theme equals light or dark whatever the icon is disappearing so we have to modify our Global Styles embed ever so slightly here we're going to write body not and here we're going to check if the body doesn't have theme dark and we have to make sure it's an attribute so we're going to wrap it in square brackets like so and we're going to do the opposite down here now if I save my settings I can toggle between dark mode and light mode here and I can also do it here in the body now there's one more problem and that is that only the icon is switching and not the theme itself so what we have to do here is paste the same not theme dark logic that we had down there and this should fix our situation now if we select the body and we set theme to light you can see here that everything is switching and if we delete the attribute we are deferring the behavior to the device settings so here we can switch between light mode and dark mode okay perfect the next thing we have to do here is ADD Wiz attributes to these elements jump into Wiz and build our Logic for toggling between dark mode and light mode in my case I already added Wiz attributes to this element over here and to the other element which is going to reset the theme so that it uses the device's preferences perfect let's jump into WS in WIS we have to do a couple of things the first thing we're going to do is go to our data store and declare a variable we're going to call the variable theme under persist in storage we're going to select local storage and the initial value is going to be set to null so we're going to return null perfect now we have to build our actions so the first one is going to be handling this click over here on the theme switcher so handle theme switch and it's going to be an onclick action under element we're going to select our button switch under settings we're going to choose on event click and under action we're going to choose set variable the theme variable and here what we're going to do is simply write exclamation mark v. theme and we have to return this value and now our toggle will already work you can see here if we go to our data store we can see the variable and if we're clicking this button we're switching between true and false cool this implementation is still not complete but we'll get back to that in a little bit now let's build the logic that's going to add the correct attribute to our body element I remembered that I also didn't add a wizd attribute to the body so I'm quickly going to go to my webflow project select the body element and add a WIS attribute to it I'm just going to call it body I'm going to publish the project and head back to Wiz I'll hit refresh attributes and now I'm going to apply an action I'm going to call it set theme I'll apply it to the body element and we're going to be adding our theme attribute so here I'm going to choose set HTML attribute the attribute is going to be theme and here we're going to check whether V theme is truthy or falsy if it's true we're going to set the value to light mode otherwise it's going to be set to dark and of course I have to write return here perfect if I try to run this you can see here it's light and you can see that the switch is already working now the last thing we have to add here is logic that's going to delete the theme when the user clicks on this icon over here this means that the theme will be set back to the user's preferences so under actions here we're going to create a new action we're going to call it handle theme reset like this we're going to apply this to our reset element and here we're going to choose on event click run function and here I'm just going to set v. theme to null now my device is set to light mode so here if I click on this button we should see see that the theme cookie was set to null but why didn't the theme switch well that's because our action our logic is incomplete still the first thing we have to fix is go to our set theme action and here we have to make sure that we are returning null if theme has not been set yet this means that we will not set the theme to light or dark if the user hasn't clicked on the switch so we're going to write here if v. theme equals null we're just going to return so we're not going to execute this logic over here and now you can see that we can switch between light mode and dark mode and we can also reset the theme but the problem is that now I have to click twice on this item in order to turn on dark mode that's because our handled theme switch action needs to have similar logic at the beginning so we need to add an if statement and here we're going to write if v. theme equals null we want to do the following we want to set the value to the opposite value of what the device preferences are does this make sense so if the device preferences are set to dark we want to set the theme to light when this switch is clicked and vice versa we're going to create a variable called prefers light and we're going to set it to window. match media and here we're going to write prefers color scheme light and of course this has to be in Brackets and then we're going to return the opposite value of this return prefer light dot matches and now if we ref refresh the canvas we can see here it's set to dark mode it can be set to light mode we can reset it and it just works correctly every time and that's how you can build a dark mode light mode switch with web flow and Wist thanks for watching and I'll see you in the next [Music] video

Channel: Wized

Views: 1,122

Keywords: wized, nocode, webapp, webflow

Id: glqenz3IJU4

Length: 19min 32sec (1172 seconds)

Published: Sun Jan 21 2024