Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package). This time, we talk about customizing theme colors.
Note:
- Assuming that SCSS installed. If not, refer to this post.
- This post relevant only in Bootstrap ^5.0.0-beta3
Bootstrap
To install bootstrap, use
npm install bootstrap@next
Using a Custom Theme
Note:
- this feature is available with
react-scripts@2.0.0
and higher.- Package
node-sass
are deprecated. See node-sass npm page and sass blog
As of react-scripts@2.0.0
you can import .scss
files. This makes it possible to use a package's built-in Sass variables for global style preferences.
To customize Bootstrap, create a file called src/custom.scss
(or similar) and import the Bootstrap source stylesheet. Add any overrides before the imported file(s). You can reference Bootstrap's documentation for the names of the available variables.
// Override default variables before the import
// you can open the bootstrap.scss module and check any available variables.
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;
//custom color to be mapped
$accent : #da6d25;
// this is used to map colors. change accordingly.
$theme-colors: (
primary: $primary,
secondary: $secondary,
success: $success,
info: $info,
warning: $warning,
danger: $danger,
light: $light,
dark: $dark,
// add any additional color below
accent: $accent,
// now bg-accent,btn-accent,etc.. can be called
);
// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';
Actually, if you get the idea, you can customize many things such as fonts, border-radius, shadows, etc. Just look for the variables.
extra tags:
Customizing Bootstrap 5 Color react.
Tweaking Bootstrap 5 Color react.
Modifying Bootstrap 5 Color react.
Changing Bootstrap 5 Color react.
Altering Bootstrap 5 Color react.
create-react-app
reactjs
react
react js
react.js
bootstrap5
color pallete
Top comments (0)