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);

---

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.

---

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?

---

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?

---

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.

---