CSS Custom Properties that Dynamically Update with React & JavaScript

How can i export these value to set global color palletes?

Tks so much. but it to down perfomance in app ?

I watched this video and I subscribed. Great content, keep it up.

Amazing, great job with this tutorial, it help me a lot

Awesome one dude! But please turn on Word-wrap in your VScode , that'll make it even more easy for us to look at the code
Shortcut (Alt + Z)

Perfect videos, thank you.

Thanks, you're a lifesaver!

Whats the benefit of this over using state and directly modify React Element ?

Wouldnt this be a bad practice as it directly modifies the DOM, which violates the principle of React.

Great video, thx buddy

just Awesome

Hey Colby, can i add animation in the :root{} and keyframes to a css variable ?

I'm so glad I found your videos! You're a great teacher.

I prefer not to do direct DOM manipulation with libraries like Vue or React if possible, so for something like this, instead of setting the style on the `documentElement`, I would put it right in the template/JSX as a style attribute on one of the elements:

`<svg style={'--color-logo': color}>...</svg>`

This, of course, requires a `useState` variable to hold the values and also requires you to have an appropriate element to put the styles on, so if the controlling component doesn't have access to the element that is getting controlled, then you'll need some type of global state.

Just a tip, try to not put the same image of you in every thumbnail this makes some people think you upload old videos which = less views.

To take this 1 step further, how would we implement this to a database for users? Basically, a user with a admin page can customer a look of something/thier page.