Topic: Custom colors dont work

sandermann free asked 3 years ago

Expected behavior Showing upsetted color for default-color

Actual behavior color does not change

Resources (screenshots, code snippets etc.) In my styles scss I imported @import "~ng-uikit-pro-standard/assets/scss/core/colors"; Then I setup default color with $default-color: #ffffff !default;

when I use default color in html the standard color for default is showing up, not the color I set up for default, in this case white.

Grzegorz Bujański staff commented 3 years ago

Can you provide more details? I checked it with navbar and the .navbar-nav class and the color changed:

$default-color: #dd5151 !default;

.navbar-nav {
  background-color: $default-color;

enter image description here

sandermann free commented 3 years ago

I have a navbar and with that: <div *dropdownMenu class="dropdown-menu dropdown dropdown-default" role="menu"> in it. The dropdown-default option changed the color of the hover effect. But here I have the standard default color, not that color I defined by myself.

Arkadiusz Idzikowski staff answered 3 years ago

We use modular styles for components. Component styles are pre-compiled and loaded when the component appears in the application view. Therefore, changing the scss variable will have no effect on the component appearance.

In this case we recommend to override specific parameter in the component class (background-color in .navbar-nav in this case). You can read more about styles customization in our guide:

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 Angular
  • MDB Version: 10.1.1
  • Device: Desktop
  • Browser: Chrome latest
  • OS: Windows 10 latest
  • Provided sample code: Yes
  • Provided link: No