Topic: Customize Theme colors
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.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- 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
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:
scss/standard/free/_variables.scssPlease let us know if it worked.
Keep coding, Mikołaj from MDB
gramercytech priority commented 1 year 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 1 year ago
Hi @gramercytech, the easiest way would be to change those colors inside the
_variables.scssfile and then importing it inside the vue appimport "./scss/index.pro.scss".You can also customize the local CSS variables for components you wan't to change. For example, checkout the
CSS variablessection in buttons API tab: https://mdbootstrap.com/docs/vue/components/buttons/#docsTabsAPIYou can also update the primary and secondary colors with use of our tutorial, but I think you've already seen that: https://mdbootstrap.com/docs/vue/content-styles/theme/