Blogs

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

  • 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! 🥳