Topic: Create our own theme
I want to create our own theme which would require all the components to be defined with respect to color, hover, click, focus. Few of the components are
- Form controls (input, ..)
- Button
- Select
Modal ... and so on all other components.
You have mentioned about the SCSS guide you can find here: https://mdbootstrap.com/docs/b5/react/content-styles/theme/ and I followed it but not able to customize completely except only primary and secondary color. How do I define other stuff.
Example: You have _variables.scss but its not changing primary color as defined to form-notch colors like $input-focus-label-color and &:focus ~ .form-notch .form-notch-leading { border-color: $primary; box-shadow: -1px 0 0 0 $primary, 0 1px 0 0 $primary, 0 -1px 0 0 $primary; }
For now, only primary and secondary colors are available in the custom theming. If you followed all steps from the guide, form notch color should also be changed. Doesn't it work for you?
estatetool priority commented 1 year ago
No it doesn't work for form notch color
Mateusz Lazaru staff commented 1 year ago
We added css variables in react ui-kit 6.1.0, and you can override them to customise components. We don't have a list of variables in the MDB React documentation yet, but you can temporarily use the MDB Standard docs to get them, as they are mostly the same.
https://mdbootstrap.com/docs/standard/components/buttons/#api-section-css-variables
example:
.btn-secondary {
--mdb-btn-color: rgb(250, 200, 225);
--mdb-btn-bg: #777;
--mdb-btn-hover-bg: #888;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 6.0.0
- Device: Desktop
- Browser: Firefox or Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes