_(1).png)
Using dark mode is pretty easy once you understand the basic concepts. It uses concepts such as elevation, depth, and light from the real world, which are easy and fun to grasp.
In light mode we use shadows to portray elevation, the dark mode uses shades of grey to portray elevation, This means that components higher in the hierarchy will have a lighter shade of grey than the component underneath them
Take the following example:
The body of the page is at the lowest elevation, this is why it has the darkest color. Then we have placed the header on the body of the page, it has a lighter color than the body. Similarly, we have placed the profile dropdown on the header, giving it an even lighter color. If this was light mode, all of these would have a white background, and we would have used a combination of shadows and border colors to achieve this.
<aside> 💡
Here’s your key takeaway: If element A is placed on element B, then element A will have a lighter color than element B.
</aside>
Imagine that your cursor or eyes are a ceiling lamp - the object closest to your eyes would have a bright/light color, the object farthest from the light will have the darkest color.
To experiment with it in the real world, try going into your room with lights off holding a piece of paper, preferably white. Then hold your mobile’s screen light to it, afterward start moving your mobile phone or paper away from each other, and notice the paper become darker.
Consider the following Testimonial component:
.png)
Testimonial component on the landing page
Its HTML may look as follows
<div class="testimonial-container">
<div class="testimonial-tile"> <!--BG = Grey D80-->
<!--some text tags here-->
<div class="customer-container"> <!--BG = Grey D70-->
<!--Customer name, image and profession here-->
</div>
</div>
</div>
As you see, the deeper you go in nesting, the lighter the component’s background becomes.