DEV Community

Ijash
Ijash

Posted on

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

#react #bootstrap #scss #bootstrap5

bootstap 5 color theme

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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)