Topic: Create our own theme

estatetool priority asked 11 months ago

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: 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; }

Mateusz Lazaru staff answered 11 months ago

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 11 months ago

No it doesn't work for form notch color

Mateusz Lazaru staff commented 10 months 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.


.btn-secondary {
  --mdb-btn-color: rgb(250, 200, 225);
  --mdb-btn-bg: #777;
  --mdb-btn-hover-bg: #888;

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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