DEV Community

Cover image for Auto Enabling dark mode(CSS only)🎉🎉
Preethi⚡
Preethi⚡

Posted on

Auto Enabling dark mode(CSS only)🎉🎉

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,
Image description
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) {
}
Enter fullscreen mode Exit fullscreen mode

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.

Image description

  • If OS theme preference is light, Then it will be changed to light mode. Image description :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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
/* possible property values */
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
Enter fullscreen mode Exit fullscreen mode

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

Discussion (6)

Collapse
zacrob profile image
Roberto Zaccardi

Wow thank you!

Collapse
preethi_dev profile image
Preethi⚡ Author

It's my pleasure

Collapse
codewhiteweb profile image
CodeWhiteWeb

OMG! that was so easy, and i never knew that!
This is called Quality!

Collapse
preethi_dev profile image
Preethi⚡ Author

Hii There, Your comments make me feel cheerful✨ and Hope we will meet on upcoming blogs.

Collapse
atulcodex profile image
Atul Prajapati

OMG, It's super useful for dashboard softwares.

I am going to use it.

thanks for such quality contents

Collapse
preethi_dev profile image
Preethi⚡ Author

Yaa Atul Prajapati, Feel gratified while seeing your comment🎉