Stylesheet and scripts for implementing dark mode with Bootstrap 4


Bootstrap Darkmode

npm version

This project provides a stylesheet and two scripts that allow you to implement a dark theme on your website. It is initially loaded based on user preference, can be toggled via a switch, and is saved via localStorage.

You can view the test page with all default bootstrap components in light and dark (thanks to juzraai!).

If you are using Angular, check out ng-bootstrap-darkmode.


With NPM/Yarn/PNPM

Install the npm package:

$ npm install bootstrap-darkmode
$ yarn add bootstrap-darkmode
$ pnpm install bootstrap-darkmode

Include the stylesheet, e.g. in styles.scss:

@import "~bootstrap-darkmode/scss/darktheme";


  1. Put the stylesheet link in <head>. Do not forget to add bootstrap.

        <!-- ... -->
        <!-- Bootstrap CSS ... -->
        <!-- Dark mode CSS -->
        <link rel="stylesheet" href="[email protected]/css/darktheme.css"/>
        <!-- ... -->
  2. Load the theme script as the first thing in <body>.

    <script src="[email protected]/bundles/bootstrap-darkmode.umd.js"></script>
    <!-- ... --->

Building Yourself

  1. Clone this repo.
  2. Run npm build.
  3. Find darktheme.css and theme.js in the dist/ directory.
  4. Follow the steps for, but replace the links with whatever local paths you put the files in.


If you are using ng-bootstrap-darkmode, you can skip this section entirely. It comes with its own JavaScript implementation that is used very differently.


ES module import:

import {ThemeConfig, writeDarkSwitch} from 'bootstrap-darkmode';


const bootstrapDarkmode = window['bootstrap-darkmode'];
const ThemeConfig = bootstrapDarkmode.ThemeConfig;
const writeDarkSwitch = bootstrapDarkmode.writeDarkSwitch;


As soon as possible after <body>, initialize the config and load the theme:

const themeConfig = new ThemeConfig();
// place customizations here

Loading the theme early shortens the time until the white default background becomes dark.

Dark Switch

If you want to use the default dark switch, load the switch script and add the element using this code:

// this will write the html to the document and return the element.
const darkSwitch = writeDarkSwitch(themeConfig);


Bootstrap Darkmode can be configured regarding both colors and the way the JavaScript helper behaves.


Many colors can be changed via SCSS variables, similar to how Bootstrap allows changing the theme. You can find all variables in _variables.scss. To change them, just put a new value before importing darktheme.scss.

$dark-body-bg: #111;

@import "~bootstrap-darkmode/scss/darktheme";


You can listen to theme changes by registering a callback with themeChangeHandlers:

config.themeChangeHandlers.push(theme => console.log(`using theme: ${theme}`));

To change the way the theme is persisted, you can change the loadTheme and saveTheme functions:

themeConfig.loadTheme = () => {
    // custom logic
    return 'dark';

themeConfig.saveTheme = theme => {
    // custom logic
  • How to implement?

    How to implement?

    Hey there, I was looking for a bootstrap dark mode switcher and found yours and was really happy about it. However I honestly don't understand how to implement it. In your description and also on the demo page you are using .js files but now there are only .ts files in the repo. I tried it with some sort of js-ts-compiler but didn't succeed. Do you have any instructions for me?

    opened by henrikfiedler 11
  • Bootstrap 5

    Bootstrap 5

    While the CSS mostly still works with Bootstrap 5, the following things may need to be changed (taken from the Migration Guide):

    Content, Reboot, etc.

    • [x] Redesigned tables to refresh their styles and rebuild them with CSS variables for more control over styling.
    • [x] .thead-light and .thead-dark are dropped in favor of the .table-* variant classes which can be used for all table elements (thead, tbody, tfoot, tr, th and td).
    • [x] .text-* utilities do not add hover and focus states to links anymore. .link-* helper classes can be used instead.


    • [x] Consolidated native and custom form elements. Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
      • [x] .custom-check is now .form-check.
      • [x] .custom-check.custom-switch is now .form-check.form-switch.
      • [x] .custom-select is now .form-select.
      • [x] .custom-file and .form-file have been replaced by custom styles on top of .form-control.
      • [x] .custom-range is now .form-range.
      • [x] Dropped native .form-control-file and .form-control-range.
    • [x] Dropped .input-group-append and .input-group-prepend. You can now just add buttons and .input-group-text as direct children of the input groups.


    • [x] Added new accordion component.


    • [x] Removed custom styles for <hr>s in each alert since they already use currentColor.


    • [x] Dropped all .badge-* color classes for background utilities (e.g., use .bg-primary instead of .badge-primary).
    • [x] Removed hover and focus styles for <a> and <button> elements.


    • [x] Simplified the default appearance of breadcrumbs by removing padding, background-color, and border-radius.


    • [x] Added new .carousel-dark variant for dark text, controls, and indicators (great for lighter backgrounds).

    Close button

    • [x] Renamed .close to .btn-close for a less generic name.
    • [x] Close buttons now use a background-image (embedded SVG) instead of a &times; in the HTML, allowing for easier customization without the need to touch your markup.


    • [x] Added new .dropdown-menu-dark variant and associated variables for on-demand dark dropdowns.
    • [x] Darkened the dropdown divider for improved contrast.


    • [x] Dropped the jumbotron component as it can be replicated with utilities. See our new Jumbotron example for a demo.


    • [x] Renamed .arrow to .popover-arrow in our default popover template.


    • [x] Added new .bg-body class for quickly setting the <body>’s background to additional elements.
    opened by Clashsoft 6
  • Export ThemeConfig and writeDarkSwitch

    Export ThemeConfig and writeDarkSwitch

    This change allows that ThemeConfig and writeDarkSwitch can be imported in a project that uses bootstrap-darkmode by

    import { ThemeConfig, writeDarkSwitch } from 'bootstrap-darkmode/theme';

    I'm probably missing something, because from the README With NPM/Yarn/PNPM section I don't see how the import could work. The above code snippet, is how I would expect this to work.

    One further step would be to rename theme.ts to index.ts, so that the import can be just [...] from 'bootstrap-darkmode'. But I didn't want to go that far, since I feel like I'm missing some context here.

    I'm not familiar with how works, so please make sure this change doesn't break

    opened by slaweet 6
  • This package shouldn't be marked as `sideEffects: false`

    This package shouldn't be marked as `sideEffects: false`

    Describe the bug[email protected]/package.json#L33

    Bug in bootstrap-darkmode. CSS files are side effects. It shouldn't be marked as sideEffects: false.

    I guess it's set by default by ng-packagr, but that's not a correct default for a CSS package.


    To Reproduce See "Steps to reproduce" in

    Expected behavior See "What is expected?" in

    Screenshots See

    Desktop (please complete the following information):

    • OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
    • Browser Chrome: 92.0.4515.107
    • Version 92.0.4515.107

    But any other desktop and browser would AFAIK do the same

    opened by slaweet 3
  • Dark mode only works on my Mac with dark mode enabled

    Dark mode only works on my Mac with dark mode enabled

    As the subject line says, this dark mode switch only seems to work on my Mac with dark mode enabled in my desktop theme settings. Viewing the same page on any other computer, the dark mode does not work. I can't even begin to explain how this is possible. I'm wondering if anybody else can.


    opened by larryathey 3
  • Navbar & sidebar are not changing to dark

    Navbar & sidebar are not changing to dark

    First of all, a big thank you to the creators of this framework.

    Implemented this framework on my website, everything changes to 'dark' when clicking a link (and vice versa) but not my navbar and sidebar. Already looked at the examples and I really don't see a difference (despite perhaps the customizing).


    <script src="[email protected]/dist/theme.js"></script>
    		const themeConfig = new ThemeConfig();
    		// place customizations here
    		<nav class="navbar navbar-expand-lg navbar-light bg-light">
    		<div class="container" style="width:80%">
    			<div class="navbar-header">


    <script src="[email protected]/dist/theme.js"></script>
    		const themeConfig = new ThemeConfig();
    		// place customizations here
        <div class="container-fluid">
          <div class="row">
            <nav class="col-md-2 col-sm-12 bg-light sidebar">
              <div class="sidebar-sticky">

    Do you guys spot the problem or is this a bug in the framework?

    opened by virtumbe 2
  • Improved package format

    Improved package format

    New Features

    • The package now contains an UMD bundle and ES modules in various formats.


    • Improved the package structure wrt. CSS and SCSS.
    enhancement feature 
    opened by Clashsoft 0
  • Fix to use yarn add

    Fix to use yarn add

    The readme instructions were failing on:

    $ yarn install bootstrap-darkmode
    yarn install v1.22.5
    error `install` has been replaced with `add` to add new dependencies. Run "yarn add bootstrap-darkmode" instead.
    info Visit for documentation about this command.
    opened by slaweet 0
  • v5.0.0-beta.1(Jan 7, 2022)

    New Features

    • Re-added support for tables.

    Also see the Alpha Release notes.

    Known Issues

    When used with Angular, it may throw some weird errors like this:

    Error: Module build failed (from ./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/sass-loader/dist/cjs.js):
    SassError: Can't find stylesheet to import.
    11 │ @import "~bootstrap-darkmode/scss/darktheme";
       │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      src/styles.scss 11:9  root stylesheet

    Workaround: Use @import "node_modules/bootstrap-darkmode/scss/darktheme"; instead.

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.4(Jan 6, 2022)

    New Features

    • Re-added support for form components.
    • Added overrides for form-check.
    • Added overrides for form-select.
    • Added overrides for form-range.
    • Added override for text-muted (same color as in light mode, but now customisable).
    • Added overrides for the accordion.
    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.3(Jan 5, 2022)

    New Features

    • Re-added support for list groups.
    • Re-added support for dropdowns.
    • Re-added support for navs.


    • Removed the default breadcrumb background color.
    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.2(Jan 5, 2022)

    New Features

    • Re-added support for (non-colored) links.
    • Re-added support for buttons.
    • Re-added support for alerts.
    • Re-added support for close buttons.
    • Re-added support for popovers.
    • Added overrides for link-* color classes.


    • Removed jumbotron overrides.
    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.1(Jan 5, 2022)


    • Updated to Bootstrap v5.1.3.
    • Added tslib dependency.
    • The package now contains JavaScript bundled as esm2020, fesm2015 and fesm2020.

    New Features

    • Added an override for the bg-body class.


    • Commented all erroneous SCSS.


    • Removed badge overrides.
    Source code(tar.gz)
    Source code(zip)
  • v0.9.1(Aug 9, 2021)

  • v0.9.0(Aug 3, 2021)

  • v0.8.1(Jul 22, 2021)

  • v0.8.0(Jul 13, 2021)

    New Features

    • Added support for colored list groups. #5
    • Added support for colored cards. #7
    • Added support for alerts. #10
    • Added support for colored borders. #18
    • Added support for colored tables.
    • Added some utility classes for forcing dark text.


    • Overhauled theme colors.
    • Links are now lightened on hover.
    • Improved customization with SCSS variables.
    • Split the large stylesheet into multiple partials.
    Source code(tar.gz)
    Source code(zip)
  • v0.7.0(Sep 5, 2020)

    • Added .bg-darkmode-black as an opposite for .bg-white.
    • Added support for data-theme="auto", which will automatically apply dark mode dependending on user agent preference.
    • Improved table border colors.
    • Improved horizontal rule (<hr>) color.
    • Updated information in package.json.
    Source code(tar.gz)
    Source code(zip)
  • v0.6.0(Sep 5, 2020)

  • v0.5.0(Sep 5, 2020)

    • Added the ThemeConfig.detectTheme method.
    • ThemeConfig.loadTheme and .saveTheme are now regular methods.
    • The ThemeConfig.loadTheme and .saveTheme methods can now accept/return null.
    • Moved darktheme.css to dist/.
    • Removed .gitignore from the NPM package.
    Source code(tar.gz)
    Source code(zip)
  • v0.4.0(Sep 5, 2020)

  • v0.3.2(Sep 5, 2020)

  • v0.3.1(Sep 5, 2020)

  • v0.3.0(Sep 5, 2020)

  • v0.2.0(Sep 5, 2020)

  • v0.1.0(Sep 5, 2020)

Adrian Kunz
Hi there, I'm Adrian and currently a PhD Student of Computer Science.
Adrian Kunz
🌓 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

小弟调调™ 12 Oct 20, 2022
Bootstrap 4 stylesheet that implements vertically-oriented navigation tabs.

Responsive Vertical Navigation Tabs for Boostrap 4 New! ?? If you use Bootstrap 5, a new package is available for that: bootstrap-5-vertical-tabs A st

Tromgy 9 Aug 4, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 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

Medjahdi Islem 5 Nov 18, 2022
Perfect SvelteKit dark mode in 2 lines of code. Support System preference and any other theme with no flashing

This library is a port of next-theme for SvelteKit. All credit goes to pacocoursey and all next-themes contributors While usable, this library is stil

null 42 Sep 30, 2022
ZaDark is an open source extension that helps you enable Dark Mode for Zalo on PC and Browser.

ZaDark – Zalo Dark Mode Table of Contents About Install Roadmap Contributing License Contact Awards Acknowledgments About ZaDark is an open source ext

Nguyễn Chánh Đại 64 Dec 22, 2022
A drop in replacement for Hacker News with support for dark mode and more.

Worker News A drop in replacement for Hacker News with support for dark mode, quotes in comments, user identicons and submission favicons. What's cool

Worker Tools 18 Dec 31, 2022
chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications

chakra-radix-colors chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications. About C

null 11 Dec 30, 2022
A TailwindCSS variant for class-based dark mode with CSS Modules.

A TailwindCSS variant for class-based dark mode with Svelte's scoped stylesheets and CSS modules. If you've ever tried to use TailwindCSS dark mode wi

Bryan Lee 13 Dec 1, 2022
Force dark mode for all web pages.

Dark Mode [WIP] Force dark mode for all web pages. Instalation Enable Epiphany extension. Optional if not done. Download the latest release from the .

null 17 Dec 2, 2022
Toggle Dark-Mode manually on 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 2 Feb 7, 2022
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

Patrik Csak 17 Jan 2, 2023
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.

CanvasSlider CanvasSlider is a lightweight JavaScript range slider. Most of the range slider controls use Javascript and a stylesheet. This slider use

null 7 Aug 15, 2022
CSS-based animations triggered by JS, defined in your stylesheet

Anim-x CSS-based animations triggered by JS, defined in your stylesheet. $ npm i Quick start An animation is

LTBL 2 Sep 29, 2021
A CSS stylesheet to quickly highlight a11y concerns.

Checka11y.css A CSS stylesheet to quickly highlight a11y concerns. Lightweight • Modern • Accessibile • Customisable • Simple The first line of defenc

Jack Domleo 428 Dec 25, 2022