Ionic 4 : How to get color *values* from element styled with [color] directive

Ionic Framework
1

Hey everyone.

I am trying to get values for colors that correspond to --ion-color-* CSS variables at run-time, from code.
I only need base color value, i.e. the one defined by --ion-color-base .

CSS

.ion-color-foo{
  --ion-color-base: #7044ff;  // << need this value when I ask for 'foo'
  --ion-color-base-rgb: 112,68,255;
  --ion-color-contrast: #eeeeee;
  --ion-color-contrast-rgb: 238,238,238;
  --ion-color-shade: #633ce0;
  --ion-color-tint: #7e57ff;
}

HTML

<ion-button color="foo">Text</ion-button>

Code

// for now this is imaginary function I am trying to figure out
let fooColor = getValueFromPredefinedColor('foo');     // returns hex string of foo's base color, "#7044ff" in this example

Since there is a neat way in Ionic 4 to add more custom colors to predefined ones (see here), I would like to define my own palette of colors using .ion-color-name classes like described in above link, and then use those colors throughout my app, and it works great. I can even add more colors at runtime by using this neat little method I wrote.

Now, for the problem: I can’t seem to get color values from named colors. I need these values so that I can pass them to third-party libraries (i.e. chart.js) to have consistent colors in the chart and in other UI elements.

Plan B
If that can’t be done, my second option was to pick up the background color from ion-button or other component styled by color directive, by using

window.getComputedStyle(document.getElementById('myButton')).getPropertyValue('background-color');

but it works only in Ionic 3 (Stackblitz example). In Ionic 4, this method always returns rgba(0,0,0,0) as the result.

Any help appreciated.

2

So because the --ion-color-base changes based on the color applied, there is no way to get that variable value by the color’s name, unless you define them as variables. This is why we have to have our Ionic colors defined in the following way:

:root {
  --ion-color-primary: #488aff;
  --ion-color-primary-rgb: 72,138,255;
  --ion-color-primary-contrast: #fff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #3f79e0;
  --ion-color-primary-tint: #5a96ff;
}

Throughout the Ionic source code, we reference these color variables by using an internal Sass function called ion-color, which basically allows us to write ion-color(primary, base) and get --ion-color-primary or ion-color(secondary, contrast) and get --ion-color-secondary-contrast.

However, this is only possible because the above variables are defined. In your specific example, you can do two things:

  1. Define the variable(s) that you need to get the value of, like so:

    :root {
  --foo: #7044ff;
}

  2. Grab the base color off the element itself:

    style.getPropertyValue("--ion-color-base")

I put an example Codepen together of how to grab either one, hope this helps (see the console logs on the click of a button for values):

3

Thank you for clarification.

It turns out, after wasting much more time that I am willing to admit, :wink: that my principal mistake was that I was calling

getComputedStyle(elem).getPropertyValue("--ion-color-base")

from ngOnInit() and it turns out that computed styles aren’t ready at that moment! After running the same code in ionViewDidEnter(), everything is fine.

Cheers!

P.S. @brandyshea, maybe it’s time to have Ionic 4 tag/category here… but I’m assuming that you are waiting for official release…

4

Mike actually decided that the ionic category would just be for the latest Ionic version and any older versions would use the specific label, see this comment here:

I’m sure he would be open to suggestions though if you have any ideas!

5

Makes sense.
Until one day when Ionic 5 arrives.
Then you will need to edit all the posts with ionic tag to be ionic-V4 … :wink:
Have a nice weekend.

6

In the below code, what I’m trying to do is I need to change the color of a string and display in the input box. Here
I need to change the string ‘omen’ to different color. How to achieve this?

image
image.png735×218 9.18 KB

7 
/* CSS */
:root {
  --primary-color: red;
}

p {
  color: var(--primary-color);
}



<!-- HTML -->
<p>I’m a red paragraph!</p>



/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care

1 Like