Currently, I have a next.js project with react-bootstrap. I am attempting to change the default blueish gray background color (#e8f0fe or rgb(232, 240, 254)) that bootstrap uses for form inputs to white.
To achieve this, I am customizing the bootstrap variables in a file named custom.bootstrap.scss:
$theme-colors: (
'primary': #e28215,
'secondary': #83b8f3,
'tertiary': #1575e2,
'headings': #2b363f,
'body': #5b6b79,
'inputBorderNormal': #c3ced6,
'inputBorderFocus': #90a3b0,
'darkBG': #2b363f,
'lightBG': #eef0f3,
'input-bg': #fff,
'input-bg-disabled': #fff,
);
@import '~bootstrap/scss/bootstrap.scss';
This custom.bootstrap.scss file is then imported into my main stylesheet index.scss:
@import './custom.bootstrap.scss'
In my application's main file _app.js, I include the index.scss like so:
import '../style/index.scss';
While the theming works for buttons, I am struggling to change the background of the form input (even with using !important). The repository can be found here.
Any assistance on this matter would be greatly appreciated.
Thank you