Need help with bootstrap-dark?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ForEvolve
205 Stars 38 Forks MIT License 163 Commits 6 Opened issues

Description

Bootstrap 4 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!

Services available

!
?

Need anything else?

Contributors list

Bootstrap 4 Dark theme

Bootstrap 4 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!

Build and deploy npm peerDependencies Status devDependency Status

Preview

Many controls Typography Forms Jumbotron ListGroup Tables Toasts Cards

Versioning

SemVer is used to keep things easy for everyone.

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

dist
directory which includes the Bootstrap JavaScript files, for convenience, and the Bootstrap Dark CSS files. To load the dark theme,
 the 
bootstrap-dark.css
or the
bootstrap-dark.min.css
instead of the
bootstrap[.min].css
file. You can load the bundled JavaScript files, the original ones or the file from the CDN of your choosing.

Example:


CDN

You can also load the files using jsdelivr by following this pattern:

https://cdn.jsdelivr.net/npm/@forevolve/[email protected]{NPM PACKAGE VERSION}/dist/{PATH TO THE FILE}
.

Here is the preceding example using jsdelivr:


Dark/Light toggle

You can

 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
    bootstrap
    class on your body, like
    .
  • To display the Bootstrap Dark theme, apply the
    bootstrap-dark
    class on your body, like
    .

If you want to support print, load the

toggle-bootstrap-print.css
or
toggle-bootstrap-print.min.css
file after the others.

Example:


Using jsdelivr CDN:


Check out the samples app for more info about this feature.

Themeable .navbar

When using the

toggle-*
stylesheets, you can create
.navbar
that uses the current theme. Light when
 and dark when 
.

Example, instead of

navbar-light bg-light
or
navbar-dark bg-dark
, use
.navbar-themed
, like this:

Check out the samples app for more info about this feature.

prefers-color-scheme

From version 1.1, I added two new css files:

bootstrap-prefers-dark.css
and
bootstrap-prefers-light.css
. Those two files use
prefers-color-scheme
media query instead of relying on a body's css class. There is also a new
bootstrap-light.css
file that is bootstrap, plus the
.navbar-themed
light addon.

There is two possible combination:

  • default (no
    prefers-color-scheme
    specified or
    prefers-color-scheme: light
    ): default bootstrap (light),
    prefers-color-scheme: dark
    : bootstrap dark
  • default (no
    prefers-color-scheme
    specified or
    prefers-color-scheme: dark
    ): bootstrap dark,
    prefers-color-scheme: light
    : default bootstrap (light)

Here is an example for a light default:


See

./samples/html/prefers-dark-default-light.html
for a working example.

Note that the print css is included in

bootstrap-light.min.css
.

Here is an example for a dark default:


See

./samples/html/prefers-light-default-dark.html
for a working example.

Note that the print css is included in

bootstrap-dark.min.css
.

How to build

If you want to build the theme manually, modify it or even contribute, this section explains how.

Prerequisites

  1. You need
    npm
    to build this project; see Node JS for more info.
  2. You need .NET Core 3.1+; see .NET Core Downloads for more info. > You can also test using the HTML sample, but there are more pages in the .NET app.

Getting started

  1. Clone this repo
  2. Run
    npm install
  3. Go to the samples/razor-pages directory (
    cd samples/razor-pages
    )
  4. Run
    dotnet restore

Starting the project

  1. Run
    dotnet run
    (from the samples/razor-pages directory) or if you are using VS Code,
    Start Debugging
    will work.
  2. Run
    npm run watch
    in a second terminal

Once you started both server and the watch command, the

browser-sync
proxy should open in a browser at the following URI:
http://localhost:3000
.

Other build info

There is a few npm and gulp scripts.

npm scripts

  1. gulp-watch
    simply runs
    gulp watch
  2. browser-sync-proxy
    starts browsersync watching for any
    wwwroot/css/*.css
    changes
  3. watch
    run both previous scripts in parallel

gulp scripts

  1. build-theme
    compile the theme to css.
  2. copy-dist-to-razor-pages
    copy the content of the
    dist
    folder to
    samples/razor-pages/wwwroot
    (used by the Razor Pages).
  3. copy-dist-to-html
    copy the content of the
    dist
    folder to
    samples/html
    (used by the HTML sample).
  4. copy-dist-to-samples
    executes
    copy-dist-to-html
    and
    copy-dist-to-razor-pages
    in parallel.
  5. copy-bootstrap-js
    copy the bootstrap js files to the
    dist/js
    directory.
  6. watch
    execute
    copy-bootstrap-js
    then watch to rebuild the theme.
  7. default
    runs
    copy-bootstrap-js
    and
    build-theme
    then
    copy-dist-to-samples
    .

The project structure

  • samples
    is the samples folders.
  • samples/html
    is a plain HTML samples app.
  • samples/razor-pages
    is the ASP.NET Core application that is used to test the theme. This directory is not packaged.
    • Pages
      are 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).
    • Services
      are the web pages services; so far it's pretty thin.
    • wwwroot
      are the web assets; the
      dist
      files are copied there.
  • assets
    are the project assets (like the screenshot in the readme file).
  • dist
    are the redistributable files; if you want to copy/paste the files into your projects, that's the ones. They also include bootstrap JavaScript files, unaltered.
  • scss
    are the source theme files.
  • Other files (root): npm, license, readme, etc.

Contribute

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
    package.json
    contributors
    array.
  • 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.

See Contributing to ForEvolve open source projects and Contributor Covenant Code of Conduct for more information.

Release notes

Since CI build numbers are automated, it is hard to know in advance what the next deployed build number will be, so the

(latest)
version represent that version.

1.1.0

  • Update
    bootstrap-dark.css
    to include the
    .navbar-themed
    class (dark version).
  • Add
    bootstrap-light.css
    which is bootstrap plus the
    .navbar-themed
    class (light version).
  • Add
    bootstrap-prefers-dark.[css|scss]
    that is the equivalent of
    bootstrap-dark.[css|scss]
    , without the print, wrapped in a
    @media (prefers-color-scheme: dark)
    media query.
  • Add
    bootstrap-prefers-light.[css|scss]
    that is the equivalent of
    bootstrap-light.[css|scss]
    , without the print, wrapped in a
    @media (prefers-color-scheme: light)
    media query.
  • Add two samples to show this usage:
    ./samples/html/prefers-dark-default-light.html
    and
    ./samples/html/prefers-light-default-dark.html
  • Update .NET/Razor Pages sample to use these new CSS files.

1.0.0

  • Update to Bootstrap 4.6.0
  • Move the Razor Pages app to the
    samples/razor-pages
    directory
  • Add a new plain HTML app in the
    samples/html
    directory
  • Move the CI/CD pipeline from Azure DevOps to GitHub Actions
  • Migrate versioning from manual PowerShell scripts to use Nerdbank.GitVersioning
  • Update README

1.0.0-alpha.1091

  • Fix form validation feedback to address issue #40
  • Add another form sample

1.0.0-alpha.1089

  • Add table examples
  • Fix form validation without
    .was-validated
    #40

1.0.0-alpha.1087

  • Update Bootstrap to 4.5.0
  • Update dependencies to fix vulnerabilities
  • Fix form validation #40

1.0.0-alpha.1075

  • Remove
    p a
    text-decoration: underline;
    • This was conflicting with
      .btn
      in
      p
      .
    • Moreover, Bootstrap does not implement such a thing so bootstrap-dark should not either.

1.0.0-alpha.978

Darken the following elements:

  • Dropdown
  • Select
  • Breadcrumb
  • Pagination

1.0.0-alpha.974

  • Update Bootstrap to 4.4.1
  • Update other dependencies

1.0.0-alpha.937

  • Darken Toasts

1.0.0-alpha.902

  • Update

    color

1.0.0-alpha.899

  • Utilities (borders)
    • Update the default
      $border-color
      to
      $dark
  • Tables
    • Enforce that
      $table-border-color
      is based on the new
      $border-color
    • Enforce that
      $table-color
      is based on
      $body-color
    • Enforce that
      $table-hover-color
      is based on
      $table-color
  • Jumbotron
    • The
      $jumbotron-bg
      color is now used

1.0.0-alpha.888

  • Add a themeable
    .navbar
    component, using the css class
    .navbar-themed
    , that:
    • When
      body.bootstrap
      , the navbar becomes
      .bg-light
      and
      .navbar-light
      .
    • When
      body.bootstrap-dark
      , the navbar becomes
      .bg-dark
      and
      .navbar-dark
      .

1.0.0-alpha.863

  • Move the print import out of the dark/light body class. This should fix bugs like
    .navbar
    being
    display: none
    by default when loading the
    .min.css
    stylesheet.
  • A new file is introduced:

    toggle-bootstrap-print[.min].css
    . This stylesheet applies the print styles from bootstrap and has been extracted so it is included only once (not once with the
    toggle-bootstrap.css
    and once with the
    toggle-bootstrap-dark.css
    ). If you don't support print, you can omit this file; if you do, include it last. For example:
    
    

1.0.0-alpha.845

  • Update the project description, the "How to use" section, and add the "Release notes" section

1.0.0-alpha.842

  • Add support for dark/light toggling

1.0.0-alpha.774 & 1.0.0-alpha.723

  • Initial dark theme

References

More darkness!

The following project applies

bootstrap-dark
to the bootstrap documentation site allowing deeper testing of the theme:

Special thanks

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).

Bootstrap 5

If you are looking for a Bootstrap 5 alternative, I suggest you look at vinorodrigues/bootstrap-dark-5. @vinorodrigues did a great job already, and whenever I have time to help, I'll do that there. I believe that we better focus on building one solid project than maintaining many. As for Boostrap 4, nothing changes about this project.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.