Customizing Bootstrap 5 Color Theme In React JS "create-react-app"

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