Auto Enabling dark mode(CSS only)🎉🎉
Tags: css, html, webdev, todayilearned
Published: 2022-01-04 15:05:37


 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. <b>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</b>😲😲. 

><em><b>Dark mode</b> is better for your eyes in low-light environments and is better for your device battery</em>.

We can achieve these without asking help to JavaScript🎉 which really sounds good (<em>Disclaimer: I'm not mean JS is complicated, But we enable these feature as simple as possible</em>). Seems be like, 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dycljzy5u4zgg3yc9ic.gif) 
NO, I'm not kidding😅. Seriously possible.
<h1>A magical media query🪄</h1>
Using <code>@media (prefers-color-scheme: dark)</code> 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,
```css
@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 <b>OS theme preference</b> is dark, Then it will be changed to dark mode. Otherwise, It will stuck with light mode.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c72db8cjli2lpvj70wzb.png)

- If <b>OS theme preference</b> is light, Then it will be changed to light mode.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suir4wfphwy5tmoyc19b.png)
<code>:root</code> Selects the root element of the document: <html> in the case of HTML and defined the <code>custom property</code> inside <code>:root</code> means which can be declared and used globally in document. Use <code>Custom property</code> is a best practice which save our loads of time like Life saver.

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

<h2>CSS Custom Property(Variables)</h2>
Declaring a custom property is done using a custom property name that <b>begins with a double hyphen (--), and a property value that can be any valid CSS value</b>.
><em>A common best practice is to define custom properties on the <code>:root</code> pseudo-class, so that it can be applied globally across your HTML document</em>.

```css
:root {
  --main-bg-color: brown;
}
```
Uh, Creating a <code>custom property</code> is pretty easy right. Likewise, Use this custom property is painless process😉. Just you use the custom property value by specifying your <code>custom property</code> name inside the <code>var()</code> function, in place of a regular property value.

For instance,
```css
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.
 
<h2><code>color-scheme</code> - Must include</h2>
We need to add styles for even form controls, scrollbars and so on. It's may be painful process. So, Using <code>color-scheme</code> changes the default text and background colors of the page to match the <b>current system appearance, standard form controls, scrollbars and other named system colors also change their look automatically</b>.
```css
:root {
  color-scheme: dark light;
}
```
```css
/* possible property values */
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
```
<code>color-scheme</code> specifying the values <b>light</b> and <b>dark</b> 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 <a href="https://github.com/Preethi-Dev/dark_mode" target="_blank">my repository</a>🎁 and practice on you own pace.

{% codepen https://codepen.io/preethi-dev/pen/GRMxJXM %}

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 <b><a href="https://dev.to/preethi_dev/claymorphism-on-2022-css-only-4am">Claymorphism</a></b>, Start to explore now.

Thanks for Reading!!
<a href="https://dev.to/preethi_dev"><b>Preethi</b></a>
<em>- Make your CSS life easier</em>