Bootstrap 4 Dark theme
Bootstrap 4.3.1 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark!
Alpha - preview
This is a work in progress, if you like it and have some spare time, contributions are welcome.
SemVer is used to keep things easy for everyone.
Until the project reaches an official version
1.0.0, the pre-release
-alpha.[build number] suffix is added to the version number.
Since this is only a dark version of Bootstrap, there should not be many breaking changes worth investing in versioning. So don't worry too much about compatibility, updating to the latest
alpha release should be safe enough.
If this is a major concerns to you, feel free to say so, and I'll see what I can do about it.
How to use
Official builds are available in the public npm registry.
npm install @forevolve/bootstrap-dark --save
The package contains the content of the
To load the dark theme,
bootstrap-dark.css or the
bootstrap-dark.min.css instead of the
You can now
<link> both the
toggle-bootstrap.css and the
toggle-bootstrap-dark.css files to allow toggling the normal/dark theme based on your page body.
- To display the original Bootstrap color, apply the
bootstrapclass on your body, like
- To display the Bootstrap Dark theme, apply the
bootstrap-darkclass on your body, like
The CI builds are deployed to the following custom npm registry: https://www.myget.org/F/forevolve/npm/.
How to build
If you want to build the theme manually, modify it or even contribute, this section explains how.
- You need
npmto build this project; see Node JS for more info.
- You need .NET Core 2; see .NET Core Downloads for more info.
- Clone this repo
- Go to the app directory (
Starting the project
dotnet run(from the app directory) or if you are using VS Code,
Start Debuggingwill work.
npm run watch
Once you started both server and the watch command, the
browser-sync proxy should open in a browser at the following URI:
Other build info
There is a few npm and gulp scripts.
browser-sync-proxystarts browsersync watching for any
watchrun both previous scripts in parallel
build-themecompile the theme to css.
distfolder content to
wwwroot(used by web pages).
copy-bootstrap-jscopy the bootstrap js files to the
copy-bootstrap-jsthen watch to rebuild the theme.
defaultsimply runs both
The project structure
appis the Asp.Net Core application that is used to test the theme. This directory is not packaged.
Pagesare the Asp.Net Core Razor Pages. That's the preview.
Why .NET Core? Well, I wanted to script some loops, and I know .Net; so I picked Razor Pages to do just that: dynamic pages! Moreover, it is open source and cross-platform.
If you think that something else would be better, feel free to open an issue about it; I would not mind switching to another technology (see the Contribute section below).
Servicesare the web pages services; so far it's pretty thin.
wwwrootare the web assets; the
distfiles are copied there.
assetsare the project assets (like the screenshot in the readme file).
scssare the source theme files.
- Other files (root): npm, license, readme, etc.
To contribute, start by opening an issue or reply on an existing issue so we can discuss your feature or bug to find the best way to approach it.
Once we settled on a strategy, you can then Fork/Code/Open a PR.
- Please add yourself in the
- Please keep PR focused on a single feature, it is easier for everyone this way and it helps keep the conversation focused. I way prefer multiple smaller PR than a single huge one.
Thanks in advance for your contribution.
Since CI build numbers are automated, it is hard to know for sure what the next deployed build number will be, so the
(latest) version represent that version.
- Update the project description, the "How to use" section, and add the "Release notes" section
- Add support for dark/light toggling
1.0.0-alpha.774 & 1.0.0-alpha.723
- Initial dark theme
The following project applies
bootstrap-dark to the bootstrap documentation site allowing deeper testing of the theme:
I started this project based on the Bootstrap Theme Kit by Alexander Rechsteiner at Hacker Themes. This allows me to publish a lighter version of the theme; making it easier to be used (compared to the full Bootstrap Jekyll docs).