JSPM

@mdbootstrap/bootstrap-dark-mode

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q43530F
  • License ISC

Responsive Dark Mode theme built with Bootstrap 5 with Dark Mode toggle button that switches between dark and light themes.

Package Exports

  • @mdbootstrap/bootstrap-dark-mode
  • @mdbootstrap/bootstrap-dark-mode/basic.html

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mdbootstrap/bootstrap-dark-mode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Responsive Dark Mode theme built with Bootstrap 5 with Dark Mode toggle button that switches between dark and light themes.

Check out Bootstrap Dark Mode Documentation for detailed instructions & even more examples.

Bootstrap Dark Mode

Dark Mode toggle/switch button

To create a dark mode toggle button add dark mode styles to your main scss file. Use the @include rule for any customized class. After that create a toggle button for switching those classes within the entire body.

Learn more how to create your own theming systems and advanced configurations in our theming docs.

<button class="btn btn-primary" id="skinToggler">Toggle skin</button>
@import '~mdb-ui-kit/src/scss/mdb.pro.scss';

// DARK SKIN
$my-theme-primary: #1266f1;
$my-theme-secondary: #b23cfd;
$my-dark-theme: mdb-dark-theme($my-theme-primary, $my-theme-secondary);

.dark {
@include mdb-theme($my-dark-theme);
}
const skinToggler = document.getElementById('skinToggler');

const toggleSkin = () => {
document.body.classList.toggle('dark');
}

skinToggler.addEventListener('click', toggleSkin);

How to use?

  1. Download MDB 5 - free UI KIT

  2. Choose your favourite customized component and click on the image

  3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More extended Bootstrap documentation