 Styling forms sucks, but luckily it is getting a little bit easier with a new addition to CSS in the property of accent color. Hello my friend and friends and welcome back to the channel. I'm so glad that you're here and if you are new to my channel, my name is Kevin and here at my channel we learn about how to make the web and how to make it look good with weekly tips tricks and tutorials that mostly focus on the wonderful world that is CSS. And I've known about accent color for a while now, I know and it's sort of been on my radar thanks to Adam Argyle posting about it a while back, but I hadn't been thinking about it too much because the browser support just wasn't there for it. But then I saw a TikTok from Adam's podcasting partner in crime, Una, and in that TikTok she let us know that browser support is pretty much here for both Chrome and Firefox, which is just super exciting. I've also started my own TikToks, if you want to follow me there, you definitely can. So as this video is coming out, it is already supported in Chrome and support for Firefox is just around the corner and I know for sure some of you guys right now are going, but what about Safari? So I'll talk about them at the end as well. All right, so here is a pretty simple code pen that I put together with just a few radio buttons and a range slider and some check boxes and stuff just so we can see how this actually works. And the first thing to do is all of these are input switches nice because we can select everything with one selector. And then it's a new property called accent color just like that. And you can just put what you want. So I can put red and watch this, they're all going to change those accent colors are changing. Isn't that cool? Everything just switches like that. So so easy to do. If you've ever had to make a custom checkbox before, you know, it's not the most fun thing in the world. And no, we don't have complete control on the styling of it, but it looks really good. And one really nice thing with this actually is that it comes with accessibility built in. So right now you can see that my checkbox is here. The check itself is white. And let's change this over to an accent color of DDD, which is a really light color. And then the checkbox is automatically switch over in their color to black. So accessibility is built in, you do not have control over the check. It's either going to choose white or black based on the contrast of the color that you've chosen as your accent color. So lime green, something like that. And you can see it switches now for me, something that makes a little bit more sense is actually having a custom property here instead. So you could have your var color accent here. And then of course, it will follow whatever color you've set up as your custom property. So you can just bring in your brand's color and plop it in there and it's going to work. And if you want to play a little bit with this and just see what you can do and see how that contrast ratio thing works, I have set this up so you can choose whatever color you want. You can try this in the different browsers to see if it's working or anything like that as well. Because if it's not working in a browser such as Safari, and I said I would address them, what would happen is basically this, they would just not get the experience of the color changing. Now hopefully that's not a deal breaker for you because it might not look as nice. It might not be exactly what you're after, but everything's perfectly functional. It's all there. This is just a progressive enhancement. We can have a little bit of a nicer user experience for people who are on either Chrome or Firefox. And then as soon as Safari actually does get support for accent color, well, magically it's going to start working for them as well. So yeah, I just think this is so great. It's so easy to do with just one line of CSS like this. And if you like this idea of really easy to style things that used to be kind of hard, I do have a video for you right here that looks at how easy it is to give custom styling to bullet points in CSS now, or if you like the short and to the point videos, I have a custom playlist right here of a bunch of short to the point videos that I think you'd enjoy a lot. And with that, a really big thank you to Zach Randy and Stuart for being my supporters of awesome over on Patreon, as well as all my other patrons to the monthly support. And of course, until next time, don't forget to make your corner internet just a little bit more awesome.