Light-switch-bootstrap - Dark mode toggle for Bootstrap 5

Last update: Jan 2, 2023

Overview

💡 Light Switch for Bootstrap 5

Basic Bootstrap 5 custom checkbox to use night mode in your web site.

Under the hood

Switching to dark mode is done by toggling HTML tags that includes -dark or -light as a class. Performed by DOM manipulation using JavaScript based on the default system theme. Local storage is used to save the choice under the name: lightSwitch

Installing

Download the latest release v0.1.3
Clone via git clone https://github.com/han109k/light-switch-bootstrap.git
Install with npm npm i light-switch-bootstrap

Usage

Add custom checkbox to your html file then reference the switch.js script:

<div class="form-check form-switch">
  <label class="form-check-label" for="lightSwitch"> Dark Mode </label>
  <input class="form-check-input" type="checkbox" id="lightSwitch"/>
</div>

<script src="switch.js"/>

About Usage

Designed for the plain Bootstrap 5 theme. If you're using custom themes then, you will probably have to customize it for better results.

Example Implementation

Bootstrap 5 Demo

Themes for Bootstrap

Bootswatch A collection of open source themes for Bootstrap View Bootswatch themes » Report bug · Request feature · Blog Usage There are a few differe

Jan 2, 2023

Now UI Kit Bootstrap 4 - Designed by Invision. Coded by Creative Tim

Now UI Kit Now UI Kit is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featurin

Jan 7, 2023

Jekyll Bootstrap theme

Landing Page Jekyll theme Jekyll theme based on landing-page bootstrap theme How to use Place a image in /img/services/ Create posts to display your s

Dec 3, 2022

A web app landing page theme created by Start Bootstrap

Start Bootstrap - New Age New Age is a web app landing page theme for Bootstrap created by Start Bootstrap. Preview View Live Preview Status Download

Dec 26, 2022

AngularJS SPA Template for Visual Studio is a project skeleton for a simple single-page web application (SPA) built with AngularJS, Bootstrap, and ASP.NET (MVC, Web Api, SignalR).

AngularJS SPA Template for Visual Studio This project is a skeleton for a simple single-page web application (SPA) built on top of the: AngularJS 1.2.

Jun 18, 2022

FREE Bootstrap Landing Page Template for Developers and Startups

Theme Details & Demo Details: https://themes.3rdwavemedia.com/bootstrap-templates/startup/appkit-landing-free-bootstrap-theme-for-developers-and-start

Nov 30, 2022

Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap

A premium and open source dashboard template with a responsive and high-quality UI. Preview Tabler is fully responsive and compatible with all modern

Jan 9, 2023

An Ember-flavoured Bootstrap 4.x eco-system

ui-bootstrap Adds a complete Ember Bootstrap 4.x eco-system THIS IS CURRENTLY A WORK IN PROGRESS ... it works but it will be "ready" pretty soon Insta

Jan 25, 2021

Automatically switch Terminal profile based on dark / light mode

auto-terminal-profile Automatically switch the macOS Terminal profile based on the system-wide dark / light appearance mode Prerequisites Node.js 14-1

Jan 2, 2023

DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Nov 18, 2022

MDN-Dark-Mode - Simple extension to add a dark mode with different themes to the MDN Web Docs website

MDN-Dark-Mode Information Chrome and Firefox extension that adds a dark mode wit

Mar 18, 2022

Toggle Dark-Mode manually on InStream.de

InStream.de Dark-Mode Umschalter Was es macht Dieses Add-On für Firefox fügt einen Button hinzu, mit dem man websites zwischen "Normal" und "Dark-Mode

Feb 7, 2022

Social-Media-Dashboard - RESPONSIVE Dashboard for social media created with JS, HTML and CSS and with the ability to switch between DARK THEME and LIGHT THEME

Social Media Dashboard Projeto feito com base no desafio do site Front End Mento

Feb 3, 2022

🌓 Add dark mode/night mode custom elements to your website.

dark-mode A custom element that allows you to easily put a Dark Mode 🌒 toggle. so you can initially adhere to your users' preferences according to pr

Oct 20, 2022

Access the Nintendo Switch Online and Nintendo Switch Parental Controls app APIs.

Access the Nintendo Switch Online and Nintendo Switch Parental Controls app APIs. Includes Discord Rich Presence, friend notifications and data downloads.

Jan 6, 2023

❤️ A heart-shaped toggle switch component for React.

heart-switch A heart-shaped toggle switch component for React. Inspired by Tore Bernhoft's I heart toggle Dribbble shot. 📖 Table of Contents 🚀 Getti

Dec 15, 2022

Pure CSS toggle switch

Pure CSS toggle switch demo install npm i toggle-switch-css or yarn add toggle-switch-css use label class="toggle-switch my-toggle-switch" in

Sep 14, 2021

A pure CSS toggle switch for form input checkboxes

Toggle Switchy A pure CSS toggle switch for form input checkboxes Preview Installation CSS link rel="stylesheet" href="toggle-switchy.css" HTML lab

Dec 8, 2022

Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.

Key Sequence Shortcut Key Sequence Shortcut is an obsidian plugin, allow binding key sequences to an obsidian command. For example If we assume "t" st

Dec 26, 2022

Comments

Table is causing issues

When using a simple Bootstrap table, in the dark mode, the text is still dark. Causing issues in readability:

           <table class="table">
                      <thead>
                          <tr>
                          <th scope="col">Title</th>
                          <th scope="col">Description</th>
                          <th scope="col">Size</th>
                          </tr>
                      </thead>
                      <tbody>
                           <tr>
                                    <th>aaa</th>
                                    <td>...</td>
                                    <td>...</td>
                           </tr>
                      </tbody>
             </table>

opened by danger89 2

Fix issue when using dark mode as system theme.

I'm using dark mode system widely, basically the body without any bg-dark/light class, it shows up this white background page. When I just toggle the switch, all works fine so I'd like to put a media query to get the initial value.

And, just a little bit of refactoring.

Thanks for the good module.

opened by tsohr 0

Releases(v0.1.4)

v0.1.4(May 23, 2022)
What's Changed

Added fix for Bootstrap table by @danger89 in https://github.com/han109k/light-switch-bootstrap/pull/3

Source code(tar.gz)
Source code(zip)
v0.1.3(Nov 10, 2021)

Merged with @tsohr impl.
Source code(tar.gz)
Source code(zip)
v0.1.2(Jul 12, 2021)

Source code(tar.gz)
Source code(zip)
v0.1.1(Jul 11, 2021)

Code refactoring and cleaning up. Size is reduced.
Source code(tar.gz)
Source code(zip)
v0.1(Jun 26, 2021)

Source code(tar.gz)
Source code(zip)

Light-switch-bootstrap - Dark mode toggle for Bootstrap 5

Related tags

Overview

💡 Light Switch for Bootstrap 5

Under the hood

Installing

Usage

About Usage

Example Implementation

You might also like...

Comments

Releases(v0.1.4)

v0.1.4(May 23, 2022)

What's Changed

v0.1.3(Nov 10, 2021)

v0.1.2(Jul 12, 2021)

v0.1.1(Jul 11, 2021)

v0.1(Jun 26, 2021)

Owner

Han

A pure html and css library for dark mode in your website.

This stylesheet customizes Jupyter Notebooks to a dark-theme with vibrant pink, blue, and lime accents.

Giggy is a collection of a few fun jokes related to Coding & Dark Humor - Created using HTML, JavaScript, CSS & Webpack.

Install the latest artifacts automatically and launch your server in a production ready mode with accessible convars.

A responsive, Bootstrap landing page template created by Start Bootstrap

A simple, one page, Bootstrap HTML website template created by Start Bootstrap

A shop homepage Bootstrap HTML template created by Start Bootstrap

A Bootstrap HTML business homepage template created by Start Bootstrap

A Bootstrap HTML homepage template with feature boxes - created by Start Bootstrap

Bootstrap-print-css - Print Stylesheet for Bootstrap 5