Media query for dark mode in css

Its 2021 almost every android,ios and windows devices have the option to choose light/dark mode as their preferable mode. its nice to have dark/light mode in your websites. Fancy isn't it ?

Media query for Dark mode

@media (prefers-color-scheme: dark) {
}

if your website theme is already have dark backrounds and light text. you can do it in reverse by adding light mode media query.

Media query for Light mode

@media (prefers-color-scheme: light) {
}

If you are not using css variables or any preprocessors in your website. you need to overwrite most of the color for having it in dark/light mode.

CSS Variables are handy

Using css variables it is easy to setup colors for dark/light mode in a simple way by replacing color variables in media query

:root {
  --background: #fff;
  --text-color: #323232;
}

// Dark mode
@media (prefers-color-scheme: dark) {
  :root {
    --background: #323232;
    --text-color: #fff;
  }
}

Live example

Try switching dark and light mode in your device and see how the below page renders

Feel free to ask me in case of doubts. i am very much happy to help you.

Blog of Yogeshwaran