Dark Mode in CSS (toggle)
Tags: discuss, beginners, css, webdev
Published: 2020-10-11 15:02:33

Hey all this article is about Dark mode and light mode toggle switch in CSS, we will discuss dark mode implementation in CSS in detail. Yes you can make a dark mode toggle switch with CSS only without JavaScript and that too with few lines of code.

## This can be achieved using 2 CSS properties 

# invert()
The **invert()** function is used with **filter** property to invert the color samples. The **invert()** function requires an argument to be passed to it. This argument determines the proportion of the conversion applied. This argument can be either a percentage value or a number.

# hue-rotate()
The **hue-rotate** function is also used with **filter** property to rotate the *hue* of an element and its contents. An hue-rotation is where you specify an angle around the color circle that the hue of element and its component will be adjusted by. This take arguments in angle.
![Color wheel](https://dev-to-uploads.s3.amazonaws.com/i/w0up5wjzx1c2txnuu69f.png)

### Let's understand it better with examples
# Basic element

```HTML
<main>
</main>
```
```CSS
main {
    background: #fff;
}
```

{% codepen https://codepen.io/ritvikbunny/pen/LYZVyZq %}
Haha, you might have not found anything in above pen, actually its blank only have white background.

# Apply invert() in above example

```HTML
<main>
</main>
```
```CSS
main {
    background: #fff;
    filter: invert(1);
}
```

{% codepen https://codepen.io/ritvikbunny/pen/qBNdmRg %}
Now you can see in this example that we have applied **invert()** function, so here the background color changed to **black** but we have given **white** color to background property. So here invert() function plays its role and inverted white into black.

# Let's add some content in it.

```HTML
<main>
    <h1></h1>
</main>
```
```CSS
main {
    background: #fff;
}
h1 {
   color: #000;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/GRqJmNJ %}
Here in above example we have added some content i.e., **h1** in the **main** element.

# Apply invert() in above example

```HTML
<main>
    <h1></h1>
</main>
```
```CSS
main {
    background: #fff;
    filter: invert(1);
}
h1 {
   color: #000;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/ZEOGKao %}
Here in above example we have applied **invert()** function to main and we set the color of **h1** to black but as we have applied **invert()** function it also got changed into **black** from **white** along with **background** but background color changed into black because it was specified as white. 

# Let's give some other color to h1

```HTML
<main>
    <h1></h1>
</main>
```
```CSS
main {
    background: #fff;
}
h1 {
   color: red;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/qBNdmKz %}
Here we have given **red** color to **h1**.

# Apply hue-rotate() along with invert() to above example

```HTML
<main>
    <h1></h1>
</main>
```
```CSS
main {
    background: #fff;
    filter: invert(1) hue-rotate(180deg);
}
h1 {
   color: red;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/NWrqjXj %}
Here we have applied **hue-rotate()** function along with taking help from *color-wheel*. Now you can see its color changed to pink from red.

# Let's add an image instead of h1

```HTML
<main>
    <img src="" >
</main>
```
```CSS
main {
    background: #000;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/KKMpmGo %}
Here we have added an image whose color is white so we have changed background of **main** to **black**.

# Apply invert() to above example

```HTML
<main>
    <img src="" >
</main>
```
```CSS
main {
    background: #000;
    filter: invert(1);
}
```
{% codepen https://codepen.io/ritvikbunny/pen/QWEbvJa %}
Here you can see that as we applied invert to the **main** element the color of the background changed to white from black but the color of our **image** also changed to **black** from **white**.

# Apply invert() to keep the color of image same

```HTML
<main>
    <img src="" >
</main>
```
```CSS
main {
    background: #000;
    filter: invert(1);
}
img {
    filter: invert(1);
}
```
{% codepen https://codepen.io/ritvikbunny/pen/XWKbRLG %}
Here as we have applied **invert()** function to our **image** along with **main** so you can see that **color of our image remained same*.

# Let's combine all the properties we have learnt so far

On applying all these properties in appropriate manner with the *toggle switch* with the help of sibling selectors we can have a dark mode toggle with CSS only. To understand it better I suggest you to go through the code of pen below. And if you want to read more about **sibling selectors** then you can read my blog on sibling selectors [**here**](https://dev.to/ritvikdubey27/sibling-selectors-in-css-33k)

```HTML
<input type="checkbox" />
<main>
    <h1></h1>
    <img src="" >
</main>
```
```CSS
main {
    background: #000;
}
h1 {
    color: #fca311;
}
img {
   //other properties here
}
input[type="checkbox"]:checked ~ main {
  filter: invert(1) hue-rotate(180deg);
}
input[type="checkbox"]:checked ~ main > img {
  filter: invert(1);
}
```
{% codepen https://codepen.io/ritvikbunny/pen/GRqJmPj %}

### Here is one of my pen, here I have done something interesting with properties explained above.
{% codepen https://codepen.io/ritvikbunny/pen/oNxWwwO %}

### *Edited* -----------------------------------------------------
For those who like to use custom method here is a the other way by which you can make a custom dark-mode without JavaScript. **[Dark-Mode in CSS Part-2](https://dev.to/ritvikdubey27/dark-mode-in-css-part-2-nmi)** .


#### *Thank you for reading this I hope you found it helpful.*
#### *Please feel free to share your views about it.*
#### *I hope you liked it and found it helpful.*
#### *Connect with me on [Twitter](https://twitter.com/ritvikdubey27?s=09) or [LinkedIn](https://www.linkedin.com/in/ritvik-dubey-3bbb22169)*