CSS Variables - manipulating them with JavaScript

CSS Variables are awesome, and one of the coolest things we can do with them is dynamcially update them with JavaScript on the fly, which is freakin' incredible, and exactly what we'll be doing in this video!

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[ASerfes]

Definitely enjoyed this series .. looking forward to MORE from you Kevin .. you are extremely good at teaching and at programming .. very impressed .. Thank you very much ..

[yankee-in-london]

Kevin, just wanted to take a second out and say you're awesome. Too easy to appreciate and move on (with at most a thumbs up) but trying to say it out loud when I can and this course definitely helped me wrap my understanding of CSS variables while presenting some very useful patterns to use. Note ... I also gave it a thumbs up too ... I figure humans like words but algorithms like numbers and you deserve praise from both.

[godfathermikal]

I love the enthusiasm you bring in these tutorials. You make learning stuff like this rather enjoyable.

[KejGiunit]

Great one Kevin. JS and SASS with css variables is so powerfull. Time to practice :)

[coolworx]

regarding Arrow functions, they aren't usually written with an underscore.

( ) => do something

The parentheses allow you to pass in an argument, such as the event object like this:
(event) => console.log(event.target)

The target in this case, would be the button.

[E-techuk]

As always, brilliantly explained, the best teacher I’ve known on YouTube, good quality sound too.

[pauldudley]

This has been a really informative series. Thanks Kevin! Im working on a project that needs multiple themes, and i think this stuff will come in handy.

[shayanfaghihi]

That was super cool! Once I saw a website that had a night-mode design in order to easily change the color of the theme. I've always had that in my mind how I can make it possible, and now I have the answer. Thank you sir.

[GauravKumar-uenz]

Thanks For breaking this up into series.

[thelavagod]

I love the thumbnail is also designed with CSS. Great work!

[prhasn]

Amazing stuff. Surprised not many websites actually utilise these to give visitors more customisation options.

[wanderdutts]

Great series, found this very helpful. I have subscribed. Good work!!

[thespirtualhub]

Awesome tutorial on css variables. Its cool to use css variables like this 👍👍 Please keep uploading such tutorials 🙂

[collured]

Looking forward to MORE from you Kevin.You are extremely good at teaching and at programming.Very impressed .. Thank you very much!!!

[agnemedia]

Wow, great tutorials sessions, Thank you

[benzflynn]

Great series. Great to be able parametrize styling themes from the top of the CSS file. Makes user theme config possible too via backend storage of user styling preferences and client-side application of these after login. By the by, this last video just forced me to think about var/const/let for value storage in JS code - I needed that ! Thanks a lot Kevin.

[seemsas]

I've learned a lot. Thank you. It was very well explained.

[benjaminfortune]

I know this is a couple years old, but still awesome video, Kev. Immediately thought of this, after you showed the variables could be redefined in your second video of the series. Was trying to figure out an easy way to enable a high-contrast toggle for a website I'm working on & this seems like a really straightforward option. Bar IE support, lol.

[nicolasfradin]

Love all your vids man. i keep discover things thanks to you !

[DankSwoops]

@Kevin, Have you ever seen anyone build a full website color scheme with this input tool? I find the idea fascinating but I'm not sure how you'd establish a spectrum of color beyond opacity.