Bootstrap Theming Tutorial: Quickly Customize Your Boostrap Theme and Enable Dark Mode!

Get hyped for this blog! We're spicing up a bootstrap theme, making it pop! 😎

Feel free to grab the demo code from here and start tinkering on your own!

• Setting up your environment. 🌟
• Override the default Bootstrap colors.
• Enable Dark Mode in your website!
• Summary

Setting up your environment. 🌟

• Start by installing Node from their official website. We need Node for installing Bootstrap as you can NOT customize your theme with the CDN version.
• Create a new directory for your demo.
• Open up your terminal and cd into your new dicrectory.
• run npm init, this will create your initial package.json.
• Install Bootstrap by running npm i bootstrap.
• Install sass as devDependencies by running npm install --save-dev sass.

Now you're ready to start customizing your theme! 🥳

Let the fun being! 🚀

• Let's create a scss file to override the default colors that Bootstrap provides out of the box, call it custom-bootstrap.scss inside your directory.
• Navigate to ./node_modules/bootstrap/scss/variables.scss.
• In that file, you will see a list of the colors that Bootstrap provides out of the box as below:
  // scss-docs-start color-variables
  $blue: #0d6efd !default;
  $indigo: #6610f2 !default;
  $purple: #6f42c1 !default;
  $pink: #d63384 !default;
  $red: #dc3545 !default;
  $orange: #fd7e14 !default;
  $yellow: #ffc107 !default;
  $green: #198754 !default;
  $teal: #20c997 !default;
  $cyan: #0dcaf0 !default;
  // scss-docs-end color-variables
• Pick any color you want to make as your primary color, take $red for example.
• Copy the below into your custom-bootstrap.scss. This will override the primary color only.
  @import "./node_modules/bootstrap/scss/mixins";
  @import "./node_modules/bootstrap/scss/functions";
  @import "./node_modules/bootstrap/scss/variables";
  
  $primary: $red;
  
  $theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
  );
  
  @import "./node_modules/bootstrap/scss/bootstrap";
• Compile your scss file by running sass ./custom-bootstrap.scss ./custom-bootstrap.css
• Import the generated custom-bootstrap.css into your page and notice the difference!

Enable Dark Mode in your website! 🌚

It's a breeze! To activate dark mode on your webpage, simply assign data-bs-theme="dark" to the html element. Easy peasy!

Summary

In this blog, we learned how to override Bootstrap default colors and how to enable Dark mode in our webpages! 🥳