Topic: Customize Theme colors

alana_vue free asked 3 years 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 3 years 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

gramercytech priority commented 10 months ago

Is this still the best approach to customizing the theme? I need to update all the standard colors for both dark mode and light mode. The documentation still only shows how to customize primary and secondary colors.

Bartosz Cylwik staff commented 10 months ago

Hi @gramercytech, the easiest way would be to change those colors inside the _variables.scss file and then importing it inside the vue app import "./scss/".

You can also customize the local CSS variables for components you wan't to change. For example, checkout the CSS variables section in buttons API tab:

You can also update the primary and secondary colors with use of our tutorial, but I think you've already seen that:

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