Topic: Applying a new color palette

caustin pro asked 7 years ago

Hi there, I'd like to apply a fairly standard material design color palette to the template. For example, the one generated here: I'm a bit confused used by the huge number of color variables in sassmdbfreedata_color.scss. What's the suggested approach for applying a typical color pallette such as this to this template? Many thanks Craig free answered 3 years ago


is there any way to access skin values within custom variables file?

so if I have a file like:

$skins: () !default; $skins: map-merge( ( "clear": ( "skin-primary-color": #b89170 ) )......

how can I access primary-color value in variables.scss?

something like:

$primary-color: skin-color(primary-color);

Krzysztof Wilk staff commented 3 years ago


You can import the ./core/_colors.scss file to your custom skin scss.

Best regards

Benny Bottema pro answered 6 years ago

Is there an update on this?   On Bootstrap there was a discussion on this as well. The final proposed solution was as follows:
// In a custom variables file...
$theme-colors: (
  primary: red

// In Bootstrap's _variables.scss file...
$theme-colors: () !default;
$theme-colors: map-merge((
  primary: $blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
), $theme-colors);
This way we can provide a custom list of colors which will be merged into Bootstrap's color palette. I would like to be able to do something similar with $material-colors. Is this possible? Furthermore, I would like to customize all the skins which some changes in the same way.

Michal Szymanski staff answered 7 years ago

Actually I can't see other way than replacing the values of the variables inside the _colors.scss file. Or perhaps I don't understand your question correctly?

caustin pro answered 7 years ago

OK thanks. I wasn't really concerned about the specific colors so much, but more the overall approach. eg. if I want to make that orange (or whatever color) the general accent color in the theme, how would I do that? And same for the primary color, dark primary color and light primary color as per a typical material design color palette

Michal Szymanski staff answered 7 years ago

Hi, if you want to just replace our "deep-orange" with this "deep-orange" change the heksadecimal color of "base" property in "$deep-orange:" variable. $deep-orange: ( "lighten-5": #fbe9e7, "lighten-4": #ffccbc, "lighten-3": #ffab91, "lighten-2": #ff8a65, "lighten-1": #ff7043, "base": #ff5722, "darken-1": #f4511e, "darken-2": #e64a19, "darken-3": #d84315, "darken-4": #bf360c, "accent-1": #ff9e80, "accent-2": #ff6e40, "accent-3": #ff3d00, "accent-4": #dd2c00 ); If you want to change each shadow of "$deep-orange" you can do it by replacing "lighten" and "darken" properties.

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: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No