bootstrap 5 dark mode example

Bootstrap 5 Dark Mode Example

updated 25/09/22 By frontendshape

Hello everyone, Today in this section we will see how to use dark mode and dark mode toggle switch in Bootstrap 5. Bootstrap 5 dark mode officially released in bootstrap 5.3 version.

bootstrap v5.3 dark mode

bootstrap v5.3 dark mode

There is dark mode library which is support bootstrap 5. For this tutorial we will use dark-mode-switch and halfmoon library both are provider good dark mode and toggle switch.

1) Bootstrap 5 Dark Mode Switch

Add a dark-mode theme toggle with a Bootstrap Custom Switch.

1.Uses local storage to save preference

2.Only 383 Bytes minified and gzipped!

Quick start

Several quick start options are available:

Clone the repo git clone
Install with npm npm install dark-mode-switch
Install with yarn yarn add dark-mode-switch

Bootstrap 5 dark mode using dark-mode-switch library.

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap 5 CSS CDN -->
    <title>Bootstrap 5 Dark Mode</title>
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Dark Mode CSS -->
    <link rel="stylesheet" href="dark-mode.css">

  <body class="bg-white text-center d-flex vh-100 justify-content-center">
    <main class="container d-flex p-3 mx-auto  flex-column">
        <div class="d-flex justify-content-center">
          <div class="form-check form-switch">
            <input type="checkbox" class="form-check-input" id="darkSwitch">
            <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
        <h1>🌓 Dark Mode Switch</h1>
        <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Anim</p>
        <ul class="list-unstyled">
          <li> Uses local storage to save preference</li>
          <li> Only 383 Bytes minified and gzipped!</li>
          <a href="#" target="_blank" class="btn btn-secondary">
            Learn more
      <!-- Drak mode JS -->
    <script src="dark-mode-switch.min.js"></script>

bootstrap 5 dark mode toggle

bootstrap 5 dark mode toggle

2) Dark Mode with Halfmoon

Halfmoon is a responsive front-end framework with a lot of useful and interesting qualities to help you build websites. It comes with a built-in dark mode, which is one of its most important and defining features.

Bootstrap like classes

Halfmoon is designed to have classes very similar to the ones found in Bootstrap, which is by far the most popular CSS framework in the world. This is because most designers are already familiar with those class names, and can therefore immediately jump into Halfmoon.

Most of the commonly used components, such as buttons, tables, inputs, dropdowns, alerts, modals, pagination, breadcrumb, badges, etc, are fully similar (in terms of class names and structure).

Quick Start

Setup halfmoon using a CDN:

<!-- Halfmoon CSS -->
<link href="[email protected]/css/halfmoon-variables.min.css" rel="stylesheet" />
 Use the following (no variables, supports IE11):
 <link href="[email protected]/css/halfmoon.min.css" rel="stylesheet" />

<!-- Halfmoon JS -->
<script src="[email protected]/js/halfmoon.min.js"></script>

Using npm

npm install halfmoon

After installation, the required CSS and JS file can be imported in the following way:

// Include CSS file
 Include the following (no variables, supports IE11):

// Import JS library
const halfmoon = require("halfmoon");

Please note that manual initialization is required for some components, that is, after the DOM is loaded, the following method needs to be called:

// Call this method after the DOM has been loaded


<div class="card w-400 mw-full m-0 position-relative"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100%, m-0 = margin: 0, position-relative = position: relative -->
 <!-- Dark mode toggle (position absolute inside the card) -->
 <div class="position-absolute top-0 right-0 z-10 p-10"> <!-- position-absolute = position: absolute, top-0 = top: 0, right-0 = right: 0, z-10 = z-index: 10, p-10 = padding: 1rem (10px) -->
  <button class="btn btn-square" type="button" onclick="halfmoon.toggleDarkMode()">
   <i class="fa fa-moon-o" aria-hidden="true"></i>
   <span class="sr-only">Toggle dark mode</span> <!-- sr-only = only for screen readers -->
 <!-- Card title -->
 <h2 class="card-title">Please fill up this form</h2>
 <!-- Form (inside the card) -->
 <form action="..." method="...">
  <div class="form-group">
   <label for="full-name" class="required">Name</label>
   <input type="text" id="full-name" class="form-control" placeholder="Your full name" required="required">
  <div class="form-group">
   <label for="profession" class="required">Profession</label>
   <input type="text" id="profession" class="form-control" placeholder="Your profession" required="required">
  <input class="btn btn-primary btn-block" type="submit" value="Submit">
  <div class="text-right mt-10"> <!-- text-right = text-align: right, mt-10 = margin-top: 1rem (10px) -->
   <a href="#">Need help?</a>
bootstrap 5 half moon dark mode

bootstrap 5 half moon dark mode

For more details you can visit