Getting dim modes on the site is enticing a ton of people groups. These days, it is turning into a trend. Dull Modes makes the pages look quiet and clean. Nobody enjoys high illuminance. Accordingly, the idea of Dark mode emerges.
Get the fascinating and attractive mix of dark and light modes on your web pages. Bootstrap Rev provides you the pre-built classes to implement into your code. Here is the complete list of sections available to you.
All you need to do is copying the code and pasting it to your editor.
Surfing the sites with dark background conceal is calm for the eyes. Likewise, the client experience is that the inky websites construct more trust among the clients.
Along these lines, convert your site to the dark mode by acquiring the classes in this fragment. Here are five background shades from dark-bg-1 to dark-bg-5.
The dark-bg-1 class is for the lightest shade. Meanwhile, for the haziest shade, use dark-bg-5.
<div class="dark-bg-1">Dark Shade 1</div>
<div class="dark-bg-2">Dark Shade 2</div>
<div class="dark-bg-3">Dark Shade 3</div>
<div class="dark-bg-4">Dark Shade 4</div>
<div class="dark-bg-5">Dark Shade 5</div>
Similarly, to get a light foundation for the site, utilize the classes given by Bootstrap Rev. As per the shade from the shading range, pick the relating class. There are five conceals from light-bg-1 to light-bg-5.
Here the shade of the light-bg-1 is the lightest. It goes darker going down the palette. The light-bg-5 class is for the most obscure shade of the light background.
<div class="light-bg-1">Light Shade 1</div>
<div class="light-bg-2">Light Shade 2</div>
<div class="light-bg-3">Light Shade 3</div>
<div class="light-bg-4">Light Shade 4</div>
<div class="light-bg-5">Light Shade 5</div>
Picking a light foundation for the website page will work out positively for the dim content shades. Here is the rundown of five classes for the text shades to cause it to seem dingier. It varies from dark-text-1 to the dark-text-5 class.
The dark-text-1 is for the lightest contrast and dark-text-5 is for the highest contrasting shade.
Note: Use it in the tag for the text. Using these classes in the parent div tag might show some drawbacks. It is because the inherited color combination in CSS will not get overridden.
<div class="dark-text-1">Dark Text 1</div>
<div class="dark-text-2">Dark Text 2</div>
<div class="dark-text-3">Dark Text 3</div>
<div class="dark-text-4">Dark Text 4</div>
<div class="dark-text-5">Dark Text 5</div>
Comparative goes with the light content tones. Picking dark background or dim mode for the site will look extraordinary with the sparkling content shade. Check the shading range and select the text tone according to your need fluctuating from the lightest to the most ill-lit.
Note: Give the class to the specific tag with the text. Using it to the main div tag or the parent
<div class="light-text-1">Light Text 1</div>
<div class="light-text-2">Light Text 2</div>
<div class="light-text-3">Light Text 3</div>
<div class="light-text-4">Light Text 4</div>
<div class="light-text-5">Light Text 5</div>