 Have you ever wanted to make JavaScript solutions responsive to thematic changes? In this episode, we're going to show you how CSS variables can make your CSS dynamic. Yeah. I think this is a really interesting topic, Julie. I definitely want to learn this. First of all, a lot of times, I'm working on apps that run inside of other apps like Teams or SharePoint, and they have themes, and people kind of expect if they switch to the dark theme or the high contrast theme that they can see your app details, right? Yeah. CSS variables are certainly way more powerful than just thematic changes and whatever, but I think this one resonates as a very obvious and simple explanation of where the CSS variables become powerful, and so I thought it was a good example, but you can take them a lot farther than this. That's interesting. The other thing is I remember using SAS and other preprocessors, and while those are great for what they do, I mean, you can't easily see the original code in the browser if you're trying to debug your styles and it requires a preprocessor step and all this kind of stuff. So will this also get us out of that business as well? A little bit, certainly. Yeah. I mean, because this is native to the browser, this is part of what the browsers just do out of the box. So this gives you that basic functionality. Obviously, these preprocessor SAS and stuff can take you a lot farther than even that, but it's definitely a baseline and a functionality. So great. Well, please show us. Okay. So let's start with defining some basic facts here. So CSS variables are these custom values that can be declared and then overwritten throughout the page. The value then takes on a context from where it's used. So it depends on where it's declared in the DOM and then where it's reassigned in the DOM as to what it affects. So the little snippet there that we see is defining variables at different levels. So we have the root CSS pseudo class and that essentially saying that we're gonna declare a variable called main color and we're gonna assign that color value red. Wait, wait, this a minus minus? Yes, that's how you declare a variable. I think of that as a decrement operator, but that is actually a variable. This from the language where what I think of as not means important. So it's kind of like everything I remember about programming is gone sideways. Yes, it's absolutely sideways at this point. This is the way that you declare a variable is the dash dash context. And then so we have a couple of classes that are defined here. So my class then is gonna use that color variable. So we're gonna say the color of my class and we're gonna wrap the variable name in the var instructor. And that means use whatever the variable value is at that point when my class is used. And then additionally, you can, we have an alternate class you see there, my alternate class where we can redefine the variable. And then again, use it or declare additional variables. So that is at the scope in the CSS. We can also do that in the HTML. So let's switch to the demos and then we can see how that works. Oh, that'd be great. All right, so here we are in our browser native demo and we're starting in the CSS file because I just wanted to, similar to what I just showed on the slides I wanna sort of show that I'm starting out by declaring a CSS variable called main color. I'm making it long green, which is a beautiful shade of green, my favorite color at the root level. And then I've defined a class that I call my class and I said my class. And then the arrow function means any div underneath my class should you assign the color and use that main color variable. So that's how we're sort of starting things off. Then we're gonna move to the HTML. So let me just show how I set this example up. We have that root div that is the output. It is declared by the output ID and we assign that my class to it. And so if you remember the CSS, it was any div underneath the my class. And so that means that's gonna apply to any one of these three divs here that we're labeling output one, two and three. That first output one, it's just some text in the div. So theoretically that's gonna take on the however we defined our my class. The second one, note that we're changing the style, we're adding a style tag, excuse me to that and we're redefining the main color variable to light blue. And then in the third one, we've added a little button here and we have another div underneath it that has our text. Okay, so now we can see the results of that and the first one is green exactly what we expected because we didn't change anything. And then on the second one, we can see that the color got changed to blue because we redeclared the main color variable to blue. And then this last one is green because it is picking up the color that we declared at the root. But if I click this button change to pink, it changes the text to pink and how we're actually doing that if we go over to our JavaScript, we can see that I'm assigning an event listener to the click event of that button. And then inside of the click event, I'm setting the style attribute and redefining main color to pink. And so this is showing how JavaScript can actually set that style attribute dynamically and thereby any changes to themes or whatever that's happening in your code can be applied to the elements in your HTML. And so it changes the theme as you go. Well, that's really cool. So where your CSS might have like some hard coded colors in it now you would use these variables all over the place. Exactly. Yeah, so your original definitions would be like your baseline theme, like your default theme, but then you could apply, change the theme even at the root element. Like obviously, if we go back to this HTML, we could have right here in my class, we could have written JavaScript code that puts a style element on that actual thing and that would override whatever the default colors were across our entire thing. And then you could just reset them at any time that you needed to. That's cool. So I have a question, how? I'm sure we've all probably seen this or written this webpage at some point where the styles are being manipulated in JavaScript and the page appears one way and then a few milliseconds later, it flips into the theme or whatever. If you know what I mean, because that initial render before the JavaScript takes over, is there a trick to doing that with this kind of an approach? Well, in the sense that if, like if you were using React or whatever, you'd probably know the style, the theme color, you'd wanna load the themes that you wanna apply before you even do the initial render. So the way that we do that in like the SharePoint framework or Teams or whatever, as we're setting up our initial render, we'd already have fetched our theme color so that we could apply them at the time of initial render. And you'd still do that in that style tag. Got it. So you could still use the same approach and just elements that get created later on will just pick up right where you are. That's right because your context would, if you assign those style colors right at the root, then anything underneath that picks up those style colors. If you have two web parts on the page and you assign different styles to them, they're gonna pick up the style colors from the div that was defined for them and any children of it uses those colors. So it absolutely means that you could have things on the page with the same code but are colored entirely differently. Wow, that's very powerful. Great. Yeah, super. Well, thanks for sharing all that. I learned a lot and I'm sure I'm gonna use this in my next project. Thanks for watching this episode of Browser Native. I hope you found it as interesting as I did to learn all about CSS variables. If you liked it, please give us a like and we'd love it if you subscribe to the channel so you'll be notified of new episodes of Browser Native as they come about. Thanks and happy coding.