Hey There, Most of the users(specially developers) are the huge fan of dark mode and try to use it on all apps and software. They will definitely expect enabling dark mode on web content also. So, we can get their theme preference by their OS(In this blog, technically call as "UA" means User Agent) without need to toggle😲😲.

Dark mode is better for your eyes in low-light environments and is better for your device battery.

We can achieve these without asking help to JavaScript🎉 which really sounds good (Disclaimer: I'm not mean JS is complicated, But we enable these feature as simple as possible). Seems be like,

NO, I'm not kidding😅. Seriously possible.

A magical media query🪄

Using @media (prefers-color-scheme: dark) media query, We can detect if the user has requested a light or dark color theme by User Agent(based on OS settings).

For instance,

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: #040404;
    --card-bg-color: #3a3a38;
    --icon-bg-color: #f7d1a2;
    --main-light-onColor: #aeb4bd;
    --main-dark-onColor: #777676;
  }
}

/* we can also style for light mode*/
@media (prefers-color-scheme: dark) {
}

Above instance illustrate that,

• If OS theme preference is dark, Then it will be changed to dark mode. Otherwise, It will stuck with light mode.

• If OS theme preference is light, Then it will be changed to light mode. :root Selects the root element of the document: in the case of HTML and defined the custom property inside :root means which can be declared and used globally in document. Use Custom property is a best practice which save our loads of time like Life saver.

If you not aware of Custom property, Not a big issue. I will explain, else you just skip this fold and pass on to next fold.

CSS Custom Property(Variables)

Declaring a custom property is done using a custom property name that begins with a double hyphen (--), and a property value that can be any valid CSS value.

A common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your HTML document.

:root {
  --main-bg-color: brown;
}

Uh, Creating a custom property is pretty easy right. Likewise, Use this custom property is painless process😉. Just you use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value.

For instance,

header{
background-color: var(--main-bg-color);
}

Hope you grasped the concept and let's get a ride on next..

Hey still with me, Proud to see your curiosity about learning new things✨. It's my pleasure to give you a bonus info and some additional resource for practice.

color-scheme - Must include

We need to add styles for even form controls, scrollbars and so on. It's may be painful process. So, Using color-scheme changes the default text and background colors of the page to match the current system appearance, standard form controls, scrollbars and other named system colors also change their look automatically.

:root {
  color-scheme: dark light;
}

/* possible property values */
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

color-scheme specifying the values light and dark on the root element. let's the rendering engine known both modes are supported by the document.

I recommend you to practice on codepen or fork my repository🎁 and practice on you own pace.

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

If you not experiment with Claymorphism, Start to explore now.

Thanks for Reading!!
Preethi
- Make your CSS life easier