Topic: Customize Theme colors

alana_vue free asked 1 year ago

Hello, I would like to customize the theme colors in order to associate my custom colors with the variables primary, secondary, danger, etc... The documentation indicated that All these colors are available as a Sass map, $theme-colors in scss/free/_variables.scss file. However, I went through all the _variables.scss files and i could not find where the colors are defined.

I appreciate your prompt support Expected behavior primary color = customcolor 1, secondary color = custom color 2

Actual behavior primary color = blue, secondary color = #B23CFD

Resources (screenshots, code snippets etc.)

Mikołaj Smoleński staff commented 1 year ago

We're currently working on a new guide for creating custom themes. Here are some tips for this moment:

  1. Move all scss directory from node_modules/mdb-vue-ui-kit/src/scss to your project
  2. Prepare in your project config for compiling scss files (i.e. with dart-sass)
  3. Change colors inside scss/standard/free/_variables.scss
  4. Compile scss with new colors.

Please let us know if it worked.

Keep coding,  Mikołaj from MDB

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

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windowns10
  • Provided sample code: No
  • Provided link: No