Ionic 4 - How to set CSS Custom Properties dynamically

Has anyone figured out how to setup Ionic 4’s CSS Customer Properties dynamically? eg --background

I’ve tried below without much luck.

<ion-item button="true" (click)="action(state)" [style.--background]="colorVar" margin>           
   Some values

where in component

this.colorVar = "blue"

1 Like

try with class="example" instead of [style.–background]=“blue” in html
and in the .scss =>
.example { background: blue; margin: ..... }
I do not know if it’s the best solution but I put my css like that

1 Like

Is this what you’re looking for?

ion-item {
    --background: var(--ion-color-primary);
    --background: #cccccc;

Ion item css properties


I just did it at the moment
in . html

  <ion-item class="item">

in .SCSS


it works well. it all depends if we want all the <ion-items> to take the same property or not

1 Like

Sorry all I should have been explicit when I meant dynamic. I want to set the background where the color is a variable as follows (as well as updating my original question):


This doesn’t work in Ionic. I actually found a solution but not sure if this the best practice as it requires the sanitizer. Keen on anyone’s else alternative on how to do this?


.action {
    --background: var(--myvar);


value: string = "blue";
  public get valueAsStyle(): any {
    return this.sanitizer.bypassSecurityTrustStyle(`--myvar: ${this.value}`);


<ion-item button=“true” (click)=“action(state)” class="action">
Some Content

thanks, I used your example and improved it by not requiring sanitizing:'--my-var', colorVar);

you also don’t need separate class, as you can set the variable inline:

<ion-button style='--background:var(--my-var)'></ion-button>

Thanks I will give this a go

i updated my reply with how to use inline set

1 Like

Check out here How to Customize Ionic 4 Toast using CSS Custom Properties given here

Just Add Custom CSS class

this.toast = this.toastController.create({
  message: 'Ionic 4 Auto Hide Toast on Bottom',
  showCloseButton: true,
  position: 'middle',
  closeButtonText: 'Yeah',

Then in global.scss file add

–background: #FFDB22;
–border-width :5px;

If I want to change colour for each item dynamically

[ngStyle]="{'background-color': item.color}"

I found here the solution:


Also, If anyone is looking to change the class dynamically, use [ngClass].

<ion-item [ngClass]="{'slideUp':item.isDone}> 

Hi all,

The original question was for setting the CSS customer properties eg --background due to the use of shadows in Ionic 4. Not general css properties like background-color (which can be done using ngStyle or style).

@abuassar solution works (thanks!) but only when the values are hardcoded. If you are using dynamic variables you need to do an extra step and import elementRef and set the style as follows.

import { ElementRef } from '@angular/core';
constructor(private elementRef:ElementRef);

ngOnInit(): void {

setStyle(value: string): void {'--my-var', value); 

This is just what i was looking for, thank you so much!

The originally requested functionality of
appears to work now (I am on Angular 9, Ionic 5)

Are you sure this is working? I just tried it with ion-button and nothing happens:

<ion-button [style.–background]="'pink'" >
Some Button


<ion-button [style.-–background]="'pink'" >
Some Button

Did you use 2 dashes? Are you on an earlier version of Angular maybe?

Yes tried with both dashes and on angular 9 and ionic 5. I’ll try on a fresh template and see if I get the same results

If you actually copy/pasted your code directly when posting (which is a really good idea, as it reduces the likelihood of comments like this one), you’ve got a mixture of hyphens (’-’, good) and endashes (’–’, bad).

I did copy my code directly mate! The issue is I originally copied jcn-ithaca code which had the endash and then added the hyphen. I now manually did with the dash and I can confirm Thanks @rapropos for pointing it out! Thanks @jcn-ithaca for the update on this. Correct code below:

<ion-button [style.--background]="'pink'" >
Some Button

Sorry, rereading that I guess it’s hard to convey tone through text. It wasn’t intended to come across as scolding, but rather just an observation that what I was about to say might be totally irrelevant if the endash was just an artifact of your posting method, and not in the code.

I see it all the time with so-called “smart” quotes.

1 Like