Dark Mode

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.

Dark Backgrounds

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.

Dark Shade 1
Dark Shade 2
Dark Shade 3
Dark Shade 4
Dark Shade 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>

Light Backgrounds

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.

Light Shade 1
Light Shade 2
Light Shade 3
Light Shade 4
Light Shade 5
<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>

Dark Text Colors

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.

Dark Text 1
Dark Text 2
Dark Text 3
Dark Text 4
Dark Text 5
<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>

Light Text Colors

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

will arise some sort of complications.

Light Text 1
Light Text 2
Light Text 3
Light Text 4
Light Text 5
<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>

Designed and built with all the love in the world by the Bootstrap Rev team with the help of our contributors.

Powered by Pixel Hashing