How to temporarily change the value of a colour variable in a component in Ionic 8 with the new colour palette update?

Question

In an Angular app with Ionic Framework, I have a component, where on a specific action, I need to make the default colour variable --ion-background-color transparent, and revert back to the defined colour when the specific action is finished. In Ionic 7, It was recommended to define all the colour variables inside a theme/variables.scss file. Changing the colour variable could be done by importing the theme/variables.scss inside the needed component and changing the --ion-background-color there whenever I wanted to make it transparent.

component.scss

@import "{path}/theme/variables.scss";

.transparent-active {
  --background: transparent !important;
  --ion-background-color: transparent !important;
}

component.ts

enableTransparency = false;

onAction(): void {
   this.enableTransparency = true;
}

onActionFinished(): void {
   this.enableTransparency = false;
}

component.html

<ion-content [class.transparent-active]="enableTransparency">
</ion-content>

This used to work without any issues.

---

However, in Ionic 8 they updated the default colour palette and recommended removing all the colour variables unless you needed to define your own colour palette. The new colour variables for light and dark themes are automatically imported when you import the core.scss and the relevant dark theme SCSS file. If there are any variables defined in the theme/variables.scss file, they will overwrite the default palette.

I need to migrate to the new colour palette so I have removed all the variables from the theme/variables.scss file. The issue is that since global variables are removed, there's no defined --ion-background-color variable for me to make transparent inside the component. The solution I have used in Ionic 7 doesn't work. I have tried importing the core.scss and the relevant dark theme SCSS to the component's SCSS file to see if it would import the needed colour variable, but it still doesn't seem to work. I also need to make sure that the --ion-background-color variable returns to its original colour when the transparency is turned off as well.

Answer 1

In your page.html you could declare a usual class :

<ion-content class="enableTransparency">
</ion-content>

and use your function to change the color in your ts file :

onAction(): void {
   this.enableTransparency = true; // Keep it or not, depending on whether you need it for something else. 

   (<HTMLStyleElement>document.querySelector(".enableTransparency")).style.background = "your color";
}

onActionFinished(): void {
   (<HTMLStyleElement>document.querySelector(".enableTransparency")).style.background = "your color";
}