Access value of primary color variable in code

Ionic Framework ionic-v3
1

Hi,

how can I use the current value of the primary color in code?
Is there a way to pass it to a method from a style binding?
something like

[style.background]="calculateColor(primary)"

The above doesn’t work. How can I make it work?

2

Why to use this way?
Give class to element and style it with scss.

3

Hello avishai,

problem with your solution: the color to use is a calculated variation of the primary color.

Is there a way to trigger the calculation from scss?

Or is there a build in way to do this: I am using a hex color, transform it to HSV color space, add a value to the V part of the HSV and transform it back to hex (which is a representation of the RGB color space).

4

So in your calculation function take the HEX string of your primary color.
You can’t get variable from scss.

5

There actually is a build in way. :smiley:

Sass allows all the HSV manipulations.

just one line of sass

background: linear-gradient(to bottom right, map-get($colors, primary), darken(map-get($colors, primary), 20%));

does all the stuff.
But out of curiosity I’ll try to find a way to access the color variables :wink: