# I wish this is how colors always worked

## Метаданные

- **Канал:** Kevin Powell
- **YouTube:** https://www.youtube.com/watch?v=XJhMW2QuBiQ
- **Дата:** 23.04.2026
- **Длительность:** 2:08
- **Просмотры:** 17,030
- **Источник:** https://ekstraktznaniy.ru/video/49252

## Описание

Color themes are so much easier now with light-dark() #css

## Транскрипт

### Segment 1 (00:00 - 02:00) []

A lot of the time when we're creating color schemes, you'll do something like this, right? Where you have all your colors set up and then you get to a prefers color scheme of dark and then you have a whole bunch of colors set up and the this can work great and you probably want to toggle to be able to go between the two of them and then you have like two code bases to maintain a little bit. Uh cuz you have the ones for that and the ones you're toggling to. Uh, and it can all be a little bit annoying, especially if you run into areas where you need text to actually be a different color because then you have to find a way to like set a class on that that's then changing it away from what the, you know, my neutral is a certain color and then and now I need a different color. I need a modifier class and it becomes a little bit of a headache. This is so much easier now thanks to the light dark function. So, let's come actually and delete all of this. It's gone. and we're going to come on my route turn this new version on where I've declared all of these only one time and I'm using the light dark color function instead. Uh I'm doing them directly to the colors. You could have some variables set up and then point them to the variables in here. And basically what this is saying is my color primary 600 in light color modes will be this and in dark over here. And the reason this is really useful now is if I have these areas that are like this where I need something to be specific, I can easily do that without having any weird modifier classes. I have my width background image here. I've set the styles I want and I know now my neutral 100 will always be correct if it's using the color scheme of light cuz the light background on it. Let's go take a look. And now it gets the dark text. And on top of that, you can use this same thing to create toggles, right, for your JavaScript because all you need to do is I'm just going to do it on my body here, but you would have something where on your body uh or you have a data attribute or something that's toggling that just means makes the color scheme be light. And so yeah, just setting the color scheme will force it. And once again, a dark here. We'll switch it back over to the dark color themes. So yeah, theming is becoming so much easier to manage thanks to the light to dark color theme. The only caveat with this is you can't create custom themes to go along with this.