Customize colors in ionic6

Question

Friends and friends recently started my studies in Ionic and I started in the most current version (6.4.2)

I’m having such a hard time that I’m beginning to question my intelligence. (laughs)

I’m trying to do something simple like change the color of a component. I’ve tried changing the app.component.scss including an equally simple instruction like:

:root {
    --ion-background-color: #ff3700;
}

I have tried to include a color following the Ionic documentation including on (my page name).page.scss:

:root {
  --ion-color-teste: #2B4A42;
  --ion-color-teste-rgb: 43,74,66;
  --ion-color-teste-contrast: #ffffff;
  --ion-color-teste-contrast-rgb: 255,255,255;
  --ion-color-teste-shade: #26413a;
  --ion-color-teste-tint: #405c55;
}

.ion-color-teste {
  --ion-color-base: var(--ion-color-teste);
  --ion-color-base-rgb: var(--ion-color-teste-rgb);
  --ion-color-contrast: var(--ion-color-teste-contrast);
  --ion-color-contrast-rgb: var(--ion-color-teste-contrast-rgb);
  --ion-color-shade: var(--ion-color-teste-shade);
  --ion-color-tint: var(--ion-color-teste-tint);
}

Ai in my HTML I only include this color in a component as an "ion-button", also following an example from the Ionic documentation

https://ionicframework.com/docs/theming/colors

<ion-button color="teste">Teste</ion-button>

But for some extremely strange reason nothing works. I have finished serving and started again.

I’ve tried everything but I can’t create or change colors in Ionic.

Thanks so much for your attention and help.

Answer 1

Styling components in Ionic can be in fact a curious task.

But all the components of Ionic have "CSS Custom Properties" defined by the Ionic team itself. In version 5 they appear at the end of the documentation of each component.

To the ion-button we have these properties

ion-button {
  --background: red;
}

<ion-button>
  Algum texto
</ion-button>