Applying a new color palette

Topic: Applying a new color palette

caustin pro asked 10 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: http://www.materialpalette.com/indigo/deep-orange. 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

Add comment

Benny Bottema pro answered 8 years ago

1 0 Best answer

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.

Add comment

Michal Szymanski staff pro premium priority answered 10 years ago

0 0 Best answer

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.

Add comment

caustin pro answered 10 years ago

0 0 Best answer

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 https://material.google.com/style/color.html#color-color-schemes?

Add comment

Michal Szymanski staff pro premium priority answered 10 years ago

0 0 Best answer

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?

Add comment

design.ge pro answered 5 years ago

0 0 Best answer

guys,

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 5 years ago

Hi!

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

Best regards

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

caustin

Pro User

10Support score
1Questions 1Answers

0Snippets likes 0Snippets