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

Top comments (8)

Collapse
 
zacrob profile image
Roberto Zaccardi

Wow thank you!

Collapse
 
preethi_dev profile image
Preethiโšก

It's my pleasure

Collapse
 
codewhiteweb profile image
Code White Dev

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

Collapse
 
preethi_dev profile image
Preethiโšก

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โšก

Yaa Atul Prajapati, Feel gratified while seeing your comment๐ŸŽ‰

Collapse
 
xd199c profile image
๐“‘๐“ช๐“ป๐“ธ๐“ท

What is better, manual or automatic?

Collapse
 
xd199c profile image
๐“‘๐“ช๐“ป๐“ธ๐“ท

thank you <3