Dark Mode with Media Query!🎉💯

Yes you heard it right, We can develop Dark mode for our websites with CSS.

By using prefers-scheme-color media query .👓

Prefers-scheme-color

The prefers-scheme-color CSS Media feature is used to detect, if the user has request the system to use a light or dark color theme.⚙

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

Customize Properties

Customize Properties or CSS Variables are entities defined by CSS Authors that contain specific values to be re-used throughout the document.

//Syntax
:root {
--background: grey;
}

Combining Media Query with CSS Variables (1st Method)

Default CSS Variables are defined at the root, prefers-scheme-color will check for dark mode and use the new CSS Variable.

:root {
--backgroundChange : grey;
}
@media (prefers-scheme-color) {
:root {
--backgroundChange : black;
  }
}

Why to use Dark Mode?!💭

Inclusive Design : 🎨

For those who face difficulty to high contrast white backgrounds & dark texts.

Battery Life :💻

Dark Mode Apps/Websites can prolong the battery life of your smartphones as well as your desktops.

Content Focused :📑

Dark Mode also puts the focus your content allowing it to stand out from the surrounding UI.

2nd Method :

You can directly use prefers-scheme-color in your CSS file too, In demo I’ll be using directly this media query in my styles.css

Thanks for reading!🐣

Yours in coding,

Khadija Batool Gardezi.