Bootstrap 4.6 - Dark Mode

Table of Contents

• 1. Presentation
• 2. Quick start
• 3. Create your own theme
  • 3.1. The default variables of Bootstrap
  • 3.2. Import your own variables
  • 3.3. Can I use the variables of this repo directly in my existing project?
  • 3.4. The colors of this dark mode version
• 4. License

1. Presentation

Create your own Bootstrap dark mode by changing only variables.

See the result on https://jprivet-dev.github.io/bootstrap-dark-mode/:

⬆ Back to top

2. Quick start

• Clone the repo: git clone https://github.com/jprivet-dev/bootstrap-dark-mode

• Go in the project: cd bootstrap-dark-mode

• Install with npm: npm install

• Start the server: npm run dev-server

• Go on http://localhost:8080/

⬆ Back to top

3. Create your own theme

3.1. The default variables of Bootstrap

Every Sass variable in Bootstrap includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code (https://getbootstrap.com/docs/4.6/getting-started/theming/#variable-defaults).

See the file on https://github.com/twbs/bootstrap/blob/v4.6.0/scss/_variables.scss.

💡	Sass provides the !default flag. This assigns a value to a variable only if that variable isn’t defined or its value is null. Otherwise, the existing value will be used. More information on https://sass-lang.com/documentation/variables#default-values.

⬆ Back to top

3.2. Import your own variables

This project imports the precompiled Sass with Webpack Encore:

• https://symfony.com/doc/current/frontend.html#webpack-encore

• https://getbootstrap.com/docs/4.6/getting-started/webpack/#importing-precompiled-sass

Create your own _variables.scss and use it to override the built-in custom variables. Then, use your main Sass file to import your custom variables, followed by Bootstrap:

assets/styles/app.scss

@import "variables";
@import "~bootstrap/scss/bootstrap";

⬆ Back to top

3.3. Can I use the variables of this repo directly in my existing project?

Yeees 🎉

If your own project is able to compile SCSS files, you can copy/past in your project all variables from the file assets/styles/_variables.scss.

⬆ Back to top

3.4. The colors of this dark mode version

Find all the colors used in assets/styles/_variables.scss.

💡	The colors were inspired by the different interfaces I could find on Pinterest: https://www.pinterest.fr/jeanphilipperivet/ui-dark-mode/

Main colors (see on coolors.co):

Shades of grey 1 (see on coolors.co):

Shades of grey 2 (see on coolors.co):

Voilà ! All you have to do is vary the colors 😃

⬆ Back to top

4. License

https://github.com/jprivet-dev/bootstrap-dark-mode is released under the licence MIT.

---

⬆ Back to top