Dark Mode in CSS Part-2
Tags: discuss, beginners, showdev, css
Published: 2020-10-18 16:05:57

As I got feedback on my blog **[Dark Mode in CSS](https://dev.to/ritvikdubey27/dark-mode-in-css-toggle-4ph5)** that some people don't want to use **invert()** method. So, here **Dark Mode in CSS Part-2** in this also I have wrote about how you can change to dark-mode on toggle without JavaScript.

If you want to apply dark-mode  but you don't know JavaScript or you don't want to use **invert() or hue-rotate()** method then you can also try this. *To understand this article better you should have good knowledge about selectors in CSS.* You can also check my blog on **[Sibling Selectors in CSS](https://dev.to/ritvikdubey27/sibling-selectors-in-css-33k)**.

### We must remember few points 

1) We have to put the **checkbox** code above the **container** in the body. Such that container is the next sibling of the checkbox. This will be more clear from code below :- 

```HTML
<body>
    <input type="checkbox"> 
    <div id="container">
    </div>
</body>
```
2) We have to give the **checkbox** position equal to absolute.

```CSS
input[type="checkbox"] {
    position: absolute;
}
```
3) We will give all those properties we generally give to **body** to the **container** such as **background**. 
4) We will give **container** width equal to the complete width of viewport and height equal to auto. Also we will give it minimum height equal to that of complete viewport.

```CSS
#container {
    width: 100vw;
    height: auto;
    min-height: 100vh;
}
```
5) We will Try not to add any other element after closing the **container** div.
6) We will give the ** * selector** margin and top, left equal to zero.

```CSS
* {
    top: 0;
    left: 0;
    margin: 0;
}
```

# Let's start desining

## First we will design our toggle switch

You can try out this toggle switch or if you want you can try one yourself. 

```CSS
input[type="checkbox"] {
  z-index: 3;
  width: 10vw;
  height: 4vw;
  -webkit-appearance: none;
  position: absolute;
  outline: none;
  border: none;
  cursor: pointer;
  left: 85vw;
  top: 10vh;
  border-radius: 2.5vw;
  background: #0B0E21;
}
input[type="checkbox"]:before {
  content: "";
  position: absolute;
  width: 3vw;
  height: 3vw;
  border-radius: 5vw;
  background: #f4f1de;
  left: .5vw;
  top: .5vw;
  transition: .5s;  
}
input[type="checkbox"]:checked {
  background: #f4f1de;
}
input:checked[type="checkbox"]:before {
  left: 6.5vw;
  background: #0B0E21;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/RwRRrjp %}

## Let's design our Light-Mode page

We will add background color to our page and set the colors for our headings and paragraph. Since its our light-mode page we will try to give it a light background color. 

```CSS
#container {
    background: #f4f1de;
}
h1 {
    color: #e07a5f;
}
h3 { 
    color: #3d405b;
}
p {
    color: #7E4D65;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/VwjjvjR %}

There will be no change in colors of our page.

## Let's design our Dark-Mode page

**In first stage** of designing dark-mode page we will add background color to our page by changing background color of **container**. Since its our dark-mode page we will try to give it a dark background color. We will also couple it with toggle button we have designed, so that when we switch the toggle button the background color will change to the dark on. For this purpose we will use sibling selectors. 
To do so we will use **next sibling selector (+)**. We will apply it on toggle. This will be more clear from code below 

```CSS
input[type="checkbox"]:checked ~ #container {
  background: #0B0E21;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/bGeeERL %}

AS you can see in above example when we toggle only background color changes.

**In second stage** of designing dark-mode we will change colors of **headings and paragraph** according to the background color so it will look good. We will also couple these changes with our toggle switch so when we toggle then the colors of headings and paragraph change accordingly for dark-mode. 
To do so we will use **child selector (>)**. We will apply it on toggle. This will be more clear from code below

```CSS
input[type="checkbox"]:checked ~ #container > h1 {
  color: #1F85A0;
}
input[type="checkbox"]:checked ~ #container > h3 {
  color: #C2BFA4;
}
input[type="checkbox"]:checked ~ #container > p {
  color: #7E4D65;
}
```
{% codepen https://codepen.io/ritvikbunny/pen/dyXXGVX %}
Here you can see there is change in the whole page when we toggle.

### There are some pros and some cons of using this method over invert() and hue-rotate() method.

## **Pros**

1) We can customize every single element on dark-mode.
2) Colors of image will not be inverted as they were getting inverted in the invert() method.

## **Cons**

1) You have to keep those 6 points in mind.
2) You have to write code for every element in which you want to see the change on toggle.
3) You must have good knowledge of selectors in CSS.

#### *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)*