Feel free to grab the demo code from here and start tinkering on your own!
Node
for installing Bootstrap as you can
NOT customize your theme with the CDN version.
cd
into your new
dicrectory.
npm init
, this will create your initial
package.json
.
npm i bootstrap
.
devDependencies
by running
npm install --save-dev sass
.
Now you're ready to start customizing your theme! 🥳
scss
file to override the default
colors that Bootstrap provides out of the box, call it
custom-bootstrap.scss
inside your directory.
./node_modules/bootstrap/scss/variables.scss
.
// 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
$red
for example.
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";
scss
file by running
sass ./custom-bootstrap.scss ./custom-bootstrap.css
custom-bootstrap.css
into your
page and notice the difference!
It's a breeze! To activate dark mode on your webpage, simply assign
data-bs-theme="dark"
to the html
element.
Easy peasy!
In this blog, we learned how to override
Bootstrap
default colors and how to enable
Dark mode
in our webpages! 🥳