CSS Variables - manipulating them with JavaScript

all right guys it's time to wrap up this miniseries we've looked at what CSS variables are we've looked at how to use them in a project we've looked at how we can use them in media queries and then we've looked at how we can create fallbacks for them finally it's time to see how we can use them to be interactive and JavaScript and variables just work so well together because it makes it really easy to to modify things on your page using JavaScript before you could always change a theme but it was complicated how you had to do it you either had to have a lot more CSS or you know we almost had two batches of CSS to switch through your themes you just write the CSS once change the variables with JavaScript and bang the whole site is changing so we're going to look at how we can do that in this video all right guys so here we are in code pen once again so if you do want to follow along the link is in the description down below so one of the big advantages with the variables is the way that the Javik we can modify it with JavaScript so here what I've done is I have two different options well this is just a button that is gonna change things when we click on it and this button here is where we can actually it's an input type color which just brings up like a native color picker they're real in the browser so my native color picker in the browser I can just select whatever I want and that's that so that's a cool little nice thing that we can use so coming over into my JavaScript now I'm gonna start with my button down here and then we'll move up to that one or actually before we do that let's do a couple of things let's set up our our our variables so we're gonna have a constant and we'll have a few different ones we're going to do color input which is going to be this button or the our color picker thing there so that's going to be equal to document document let's make this bigger so we'll be able to see what I'm writing document query see left door and input and one nice thing with the query selector is I can actually do like input and then type equals color all inside of there so one thing advantage with query selector in this case I only have one input but if you ever had a site that had multiple you could you can easily select something like that you don't have to have a class on it or something even though query selector is a bit slower than get element by class name and all of that we're gonna have a second one which is going to be our our color color color button is that one will be document query whoops I also made a typo there select door selector for this one we'll just have button and our third one is going to be our color variable which is going to be equal to now for my color variable it's the one that I want to change in this case we're gonna use the yellow background that's on there so if we come and I look at my color my variables it's just called yellow so we can just come in here and say yellow there we go so my yellow is now setup so for my button what we're gonna do is we're gonna do our color button and we're gonna add an event listener or I click so if somebody clicks on it we want to do something right so if they click on it we're gonna do a function so I'm using arrow functions on this which are the es6 way of doing things so when somebody clicks on this I want to change my yellow I want to change what it is so how we can do that is I can select the route pretty much by doing document document element so the document element itself so that's the route and I can set a style on there so we're going to do a style I'm going to say set property property so the property that we're going to set is our color variable and we're gonna set it to green so now if I click on this it changes over to green how cool is that awesome so fun so just by clicking on that it changes now the one thing is if this person is using a browser that doesn't support CSS variables such as Internet Explorer it won't work now the advantage with doing something like this is it can create a more custom experience for people who are on you know on more modern browsers but for those who aren't there's websites gonna work fine it's just they won't get these types of things and they probably won't have a button that changes the thing but you could have it dynamically load you know if the person refreshes the page you're bringing in a different color scheme or even maybe if they scroll past a certain point different colors start shifting or you know you could come up with something fun to do and so this is just a really basic example of how if I click on something it will change it and you know it's not even going to change back it's just setting the property to green something it's a bit more interesting would be with our little color picker here right so that one is a bit more dynamic so we can do color input and I'm going to add an event listener again add event listener so this time I'm not looking for a click though I'm looking for a change because this has a property like you know it if I click on it it has you know it's set to black right now so I won't know if there's a change in this so we can look for a change and I'm also going to keep track of what that change is if you're not used to arrow functions the underscore here this is the same as just writing like the old way of doing it function with nothing in it whoops like that and then the curly braces so you can take that whole function curly brace thing out and just sort of replace it with that and the arrow and in this case because it's one thing I'm taking I don't need to put it this would be the same as doing the old function E and then having it that way so I can just do e and then do my arrow and just a little bit faster alright so the first thing we should do now actually is just do a console console of e to see what this is actually doing of course but if you do want this to work you have to spell a listener right and not even to listen so let's let me do an inspect on here just because I can't do it sadly within so let's go over to my console and I'm gonna click on my box here and let's change this and push ok and it's changed and so it's giving me this big thing so you can see that the event type is change so that's why I'm listening for changes so I'm listening for change and then it gives me all of these things here so one thing that you'll notice in here is I do have a target so if I look at the target and the target input is this thing itself and if I look inside of there there's a whole bunch of crap for now most of this isn't important or for this thing nothing much is in here that is very important except all the way down here all the way down and there's a lot of stuff we're looking for value value value value and there's the color I picked so if I do this again and I change it let's just go to pure red and I click OK and we have another one so in there might target and scroll all the way down value type there's type color value and there's the color red that I just got so just to show you instead of console logging II I can console.log the e target so e target is what we word this whole big thing we're looking in and I can get the value itself so dot value so now if I click on this and I change the color let's go with turquoise ish the new console log is just giving me the color just to show you that work let's clear that and make it a little bit easier to see push ok and it gives me the color and if I come in here and it change again it gives me the color so that's really cool right so what we can do is instead of console logging this we can actually use it the exact same way we did it here so even we can copy all that and paste it I just realized when I did this I never really showed you what's happening so we'll look at that in a second so I want to change my color variable but this time I don't want to change it to green I want to change it to my e target value so we can get out of here let's go to my elements and let's find cuz we're in a code pen so let's just do an inspect and here's my body and here's my head and here's my HTML so let's click on this one so this whole set property on the document document element as I said that's the same as the root and the root is this baby right here so if I come on here and I change my color now and I click OK you can see that it's added class style is equal to and it's changing the so it's still called yellow which is kind of weird I should Robby change the name of that but it's changing yellow to be that instead so that's why it's changing right here if I click here again now I can go down and click OK and it's gonna change it there and with my green button here if I click it's just going to change it to the green like I originally told it to and then once again I can come in and choose my new color there so this is something you can't do with sass variables and there are ways of doing this with variables but you probably imagine a world where this you know right now I'm changing the variable yellow and I'm only using the variable in one place but if this variable were used in 15 or 20 different places on my website I could change them all at the same time which is something that could be a lot more complicated before so it just makes it really really easy to make quick changes to any variable you have on your website on the fly and these variables can be modified based on anything that JavaScript could could monitor pretty much so that's really really cool and you can do some really fun stuff with that so yeah go forth and explore this and see and have fun with it because I think it's a really cool thing that's being underutilized especially now that browser support for it is really increasing sadly it's not there a hundred percent but it's much better than it used to be that was a lot of fun I think that was cool I'm looking forward to seeing where they goes but I'm definitely going to be in court bringing them into my workflow from now on so I had a lot of fun exploring them with this deep dive I hope you did too if you did let me know down in the comments below of course if you liked the video or you like the whole little deep dive we just did hit the thumbs up to let me know if you watched all this and you haven't yet subscribed what are you waiting for hit that subscribe button a big thank you to my patrons who are supporting me to help make this series and just every video I make possible so thank you so much if you're curious about how you can support this channel there's a link down below click on it for patreon and find out all about it down there and until next time don't forget to make your corner in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 14,763

Rating: 4.9591837 out of 5

Keywords: Kevin Powell, tutorial, html, css, css variable, css variables, css custom properties, what are css variables, how to use css variables, css variables tutorial, JavaScript, CSS variables javascript

Id: cZ0yt67A7OM

Length: 11min 21sec (681 seconds)

Published: Thu Jan 04 2018