Start Using color-scheme CSS Property When Working With Dark/Light Themes

[@wajdwael8775]

Simple and clear explanation.

[@CSSWeekly]

Thank you so much, Wajd! I'm thrilled to hear this! 🙏

[@CSSWeekly]

A few more websites I found that should probably use color-scheme property: - hashnode.com/ - web.dev/ - jsfiddle.net/ - vercel.com/ Have you found any? 🙂

[@galliumwang5089]

howerer, It doesn't provide a button to switch theme, it's really annoying😅

[@CSSWeekly]

True. But if they did everything for us, we wouldn't have an opportunity to play with new features. 😅

[@clevermissfox]

If you’re using set colors on your page , can you set up custom properties and tell the browser “these are the set of colours for light mode” and “these are the set of colours for dark mode”? Other than using media query of (@prefers-color-scheme: dark) but still with css? Eg if (light mode) { -body-bg: lightpink; -card-bg: lightgrey; -primary-txt: black; } Then if(darkmode) { -body-bg: charcoal; -card-bg: black; -body-text: white; }

[@CSSWeekly]

This is a fantastic question! 🙏 There isn't a simple way really to accomplish this, as far as I know. 🙁 There is light-dark() function that lets you specify light and dark colors in one line. And we might new schemed-value() function that would help with this. Bramus Van Damme has a nice article on the subject: www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/

[@thedacian123]

Hello,So when we are setting color-scheme property ,you are telling the browser to render the page/elements using OS system prefs color scheme?

[@CSSWeekly]

Hello Alex. The color-scheme tells the browser to render page/elements in the color-scheme you specify. It doesn't have to match the system color-scheme. A website could support only a dark scheme, for example, while you use light in your OS. And you would use this with `prefers-color-scheme` media query, not instead. Does this answer your question?🙂

[@clevermissfox]

@@CSSWeeklyif you have a light theme OS , where would you specify that you prefer a dark theme to have those styles applied?

[@danieladu3923]

What is the title of the yellow book om your table

[@CSSWeekly]

"Show Your Work!" by Austin Kleon. It's a short book encouraging you to share your work openly and publicly. 🙂

[@nathan_wind]

Cool video! Though I knew about light/dark modes, I didn’t know they could both be specified, and I also didn’t know about the meta tag for them.

[@CSSWeekly]

Thank you so much, Nathan! I’m delighted to hear that you learned something new! 🙏

[@bonsayeb9620]

Thank you for this awesome video. Is it possible to add animation to the color-scheme property? I tried adding a transition of 2s but it didn't work.

[@CSSWeekly]

Thanks for your comment, Bonsaye! 🙏 Unfortunately, color-scheme is not animatable. You can find a list of all properties that are here: developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties Hope this helps. 🙂

[@svenson95]

Even KZbin doesnt use color-scheme :D although it would look much better if they would Greets from Berlin!

[@CSSWeekly]

Indeed it seems like KZbin doesn't use `color-scheme`, but I think they do a great job with their dark theme-their attention to detail is on point. 🙂

[@loiuxxx]

how about if there is a defined colors? will color-scheme work?

[@CSSWeekly]

No, it will not work automatically in that case, John. Or rather, only native UI elements would be affected. So you will have to redefine those colors manually. And this is probably the most common way people would use the color-scheme.

[@loiuxxx]

@@CSSWeekly thanks!

[@CSSWeekly]

Glad I could help! 🙂