DEV Community

Discussion on: Light and dark mode in just 14 lines of CSS

Collapse
felixdusengimana profile image
Felix DUSENGIMANA

This is cool! Here's how you can do it with one line of CSS and achieve the same results:

:root{
  color-scheme: light dark;
}
Enter fullscreen mode Exit fullscreen mode

Check out this URL: codepen.io/phelixdusengimana/pen/O...

Advantages of this approach include:

  • It automatically changes form controls' appearance to fit the user's chosen theme.

  • It changes the text color and scrollbar theme based on the user's preferred UI theme.

Read more: developer.mozilla.org/en-US/docs/W...

Collapse
whitep4nth3r profile image
Salma Alam-Naylor Author

TIL!! Thanks for that! I guess if you wanted different shades of black and white for the foreground/background colours you’d still have to do a bit more work?

Collapse
felixdusengimana profile image
Felix DUSENGIMANA • Edited on

Sure. If you want different background other than the CSS built-in you'd use the first approach.

Collapse
bmassioui profile image
Bouchaib MASSIOUI

I try to change my mode to dark in Ubuntu, but nothing happened :)

Collapse
felixdusengimana profile image
Felix DUSENGIMANA

Unfortunately, setting Ubuntu on dark mode won't set Chrome as well.
Thus, it's not as straightforward as Windows, and it will work a bit differently, but it's simple to set up.
I made this step-by-step guide to follow when changing chrome to dark mode in ubuntu: Link