Editing Default Colors For Component In Ionic

Issue

Beginner to Ionic & Angular here. I am trying to change the color of a variable for a certain component but it isn't working. I have already looked at similar posts on stack overflow and they didn't help me. I am trying to change the background-color for a certain component.

Here is my code for the /component/comp.scss:

body{

    --ion-background-color: #ffffff;

}

Here is my code for the /theme/variables.scss:

@media (prefers-color-scheme: dark) {
  .ios body {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0,0,0;
  }
}

Solution

TL;DR: If you're looking to style the background for a single component, you're most likely looking for --background instead of --ion-background-color;

Long Story: The syntax you're using is creating a SASS variable and is generaly used in theming entire Ionic apps, in which case you would declare these variables in the root like so:

:root {

     --ion-background-color: #FFFFFF;

}

and then be able to use the variable anywhere in your app, even on non-Ionic elements:

body {

     background-color: var(--ion-background-color);

}

In other words, the property --ion-background-color isn't overriding any Ionic generated property, but instead creating a reusable variable.

When looking to style specific components, however, the syntax is generally --background, but you'll want to check the documentation to be sure. Each Ionic Component has a page in the docs that lists all the custom CSS properties. In most cases, though, you'll want to use --background. For instance, if you want to change the background color of ion-button:

ion-button {

     --background: #FFFFFF;

}

Answered By - Cortney Thomas