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
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 https://github.com/coliff/dark-mode-switch.git
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">
<head>
<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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Dark Mode CSS -->
<link rel="stylesheet" href="dark-mode.css">
</head>
<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>
</div>
</div>
<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>
</ul>
<p>
<a href="#" target="_blank" class="btn btn-secondary">
Learn more
</a>
</p>
</main>
<!-- Drak mode JS -->
<script src="dark-mode-switch.min.js"></script>
</body>
</html>
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="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon-variables.min.css" rel="stylesheet" />
<!--
Or,
Use the following (no variables, supports IE11):
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" rel="stylesheet" />
-->
<!-- Halfmoon JS -->
<script src="https://cdn.jsdelivr.net/npm/[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
require("halfmoon/css/halfmoon-variables.min.css");
/*
Or,
Include the following (no variables, supports IE11):
require("halfmoon/css/halfmoon.min.css");
*/
// 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
halfmoon.onDOMContentLoaded();
index.html
<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 -->
</button>
</div>
<!-- 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>
<div class="form-group">
<label for="profession" class="required">Profession</label>
<input type="text" id="profession" class="form-control" placeholder="Your profession" required="required">
</div>
<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>
</div>
</form>
</div>
bootstrap 5 half moon dark mode
For more details you can visit gethalfmoon.com
