bootstrap-dark-5
Advanced tools
The Ancillary Guide to Dark Mode and Bootstrap 5 - A continuation of the v4 Dark Mode POC
A continuation of the v4 Dark Mode POC, but this time for v5
This is a follow up to The Definitive Guide to Dark Mode and Bootstrap 4 body of work, and pertains to Bootstrap 5 (Github repo.).
If you're after the same work for Bootstrap 4 please visit the vinorodrigues/bootstrap-dark repo.
This is a 'Work In Progress' and is specifically based on Bootstrap 5 - Beta 2 - https://github.com/twbs/bootstrap/tree/v5.0.0-beta2
I have tried to merge this project in to Bootstrap core (see pull request #32936), but while that's being considered I will continue to work on this project. If you wish this to be added to Bootstrap core then let the authors know by adding a comment to the pull request.
This code will make little sense if you don't read The Definitive Guide to Dark Mode and Bootstrap 4 first.
The code compiles the four methods (and variants - six in total) of the original body of work, but compiled for and sourcing Bootstrap 5. These are:
Method 1 (link to original)
bootstrap-night: This is simply a dark bootstrap theme. I can however be used with the Bootstrap core CSS to deliver a 2-file dark mode functionality.Method 2 (link to original)
bootstrap-nightfall: This is simply the "color only" CSS of all the components of Bootstrap core CSS, but dark, and is intended to be used as a add-on. It can however with a simple media query drive automatic dark mode switching.Method 3 (link to original)
bootstrap-nightshade: This a modification of the Bootstrap core and adds dark color CSS for all the components, but dark, nested in a html.dark class wrapper. By itself it cannot offer dark mode switching, but add the included darkmode.js library and you have an interactive dark mode switching variant of Bootstrap with built in "toggle" button support.
bootstrap-blackbox: 
data-bs-color-scheme. The same darkmode.js library drives this one, all you need to do is add the data attribute to your HTML tag.
Method 4 (link to original)
bootstrap-dark: This is the recommended method; one CSS with both light and dark themes, toggle-able only with the OS or browser prefers-color-scheme media query.
bootstrap-unlit: This variant is essentially the same as the "dark" variant, but with "dark" scheme as the primary/fallback and "light" as optioned in color scheme.
1. bootstrap-night | 2. bootstrap-nightfall | 3. bootstrap-nightshade | 3b. bootstrap-blackbox | 4. bootstrap-dark | 4b. bootstrap-unlit |
|---|---|---|---|---|---|
| Quick Start Guide | Quick Start Guide | Quick Start Guide | Quick Start Guide | Quick Start Guide | Quick Start Guide |
darkmode.js Reference | darkmode.js Reference | ||||
| See Example | See Example | See Example |
Some of the test pages have been set up at vinorodrigues.github.io/bootstrap-dark-5
Yes.
Licence is MIT. i.e. use as you whish as long as you credit the original authors and leave the copyright in situ.
If you're a theme builder or want to use its principles in your own project you'll need to have Git and Node installed.
git clone https://github.com/vinorodrigues/bootstrap-dark-5.gitnpm install (See note below.)_variables.scss and _variables-alt.scss in the scss sub-folder.npm run build to build your theme.dist folder.
npm i -g autoprefixer documentation browser-sync clean-css-cli cross-env eslint eslint-config-xo eslint-plugin-import eslint-plugin-unicorn find-unused-sass-variables imagemin-cli nodemon npm-run-all postcss-cli rtlcss sass stylelint stylelint-config-twbs-bootstrap svgo terser typescript
Developers can include the scss and dist folders into your own project with:
npm install bootstrap-dark-5
You can also hotlink the theme via CDN with jsdelivr.com.
You can access the theme CSS file from the GitHub release:
bootstrap-dark - the @media perfers-color-scheme variant
bootstrap-nightshade - the html.dark css class + JS library variant
darkmode.js Reference.bootstrap-night - that dark theme only variant
Must reads for all developers wanting to write for dark mode:
...obviously, the original content: The Definitive Guide to Dark Mode and Bootstrap 4
web.dev, Thomas Steiner (@tomayac), Jun 27, 2019 (updated Jun 9, 2020), "prefers-color-scheme: Hello darkness, my old friend"
web.dev, Thomas Steiner (@tomayac), Apr 8, 2020 (updated Jun 16, 2020), "Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag"
CSS-TRICKS, Adhuham, Sep 9, 2020 "A Complete Guide to Dark Mode on the Web"
My bit about images and other considerations in my ".. Definitive Guide .." piece.
If you have useful feedback drop me an "Issue" on the GitHub Issues page.
© 2021
FAQs
The Ancillary Guide to Dark Mode and Bootstrap 5 - A continuation of the v4 Dark Mode POC
The npm package bootstrap-dark-5 receives a total of 366 weekly downloads. As such, bootstrap-dark-5 popularity was classified as not popular.
We found that bootstrap-dark-5 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.