CSS color-scheme-dependent colors with light-dark()

This content originally appeared on Bram.us and was authored by Bramus!

I’ve written about light-dark() before here on bram.us, and last month I also wrote an article for web.dev about it.

The article takes a bit of a different approach, so it’s still worth a read even when you’ve seen my previous one before.

System colors have the ability to react to the current used color-scheme value. The light-dark() function exposes the same capability to authors.

I’m especially fond of this demo that I built. The page responds to your Operating System’s light/dark setting but also allows overriding light/dark mode by changing the value of the color-scheme to only light or only dark.

See the Pen
Color switching with light-dark() and color-scheme by web.dev (@web-dot-dev)
on CodePen.

CSS color-scheme-dependent colors with light-dark() →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2024-04-21T15:40:53+00:00) CSS color-scheme-dependent colors with light-dark(). Retrieved from https://www.scien.cx/2024/04/21/css-color-scheme-dependent-colors-with-light-dark/

MLA

" » CSS color-scheme-dependent colors with light-dark()." Bramus! | Sciencx - Sunday April 21, 2024, https://www.scien.cx/2024/04/21/css-color-scheme-dependent-colors-with-light-dark/

HARVARD

Bramus! | Sciencx Sunday April 21, 2024 » CSS color-scheme-dependent colors with light-dark()., viewed ,<https://www.scien.cx/2024/04/21/css-color-scheme-dependent-colors-with-light-dark/>

VANCOUVER

Bramus! | Sciencx - » CSS color-scheme-dependent colors with light-dark(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/04/21/css-color-scheme-dependent-colors-with-light-dark/

CHICAGO

" » CSS color-scheme-dependent colors with light-dark()." Bramus! | Sciencx - Accessed . https://www.scien.cx/2024/04/21/css-color-scheme-dependent-colors-with-light-dark/

IEEE

" » CSS color-scheme-dependent colors with light-dark()." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2024/04/21/css-color-scheme-dependent-colors-with-light-dark/. [Accessed: ]

rf:citation

» CSS color-scheme-dependent colors with light-dark() | Bramus! | Sciencx | https://www.scien.cx/2024/04/21/css-color-scheme-dependent-colors-with-light-dark/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.