From the course: Modern CSS Techniques without JavaScript

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Working with the CSS light-dark() function

Working with the CSS light-dark() function

From the course: Modern CSS Techniques without JavaScript

Start my 1-month free trial Buy for my team

Working with the CSS light-dark() function

“

- [Instructor] The next method we'll examine involves explicitly declaring colors for the light and the dark modes for our site using real color values and the new CSS light dark function. So let's go through all of that now. By adding the color scheme light dark here on the HTML, we've said that we're going to have two different color schemes for the site. And by default, your browser's going to make some guesses for this. For example, taking white and making it black. But we can spell out more specifically what exactly we mean by light mode and dark mode with this new light dark function. We're going to start here at root and we will include these options here. So for white, for example, we could say something like light-dark, and then we could spell out exactly what colors we want here. So white would be first, that goes with light mode, and black would be for dark mode. Likewise, for black, let us add light-dark. And so we're going to be black in light mode and white in dark mode.…

Contents