Ionic-framework: [4.0.0-beta.15] Changing the color of ion-content does not work

[freeintelligence]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.3.0 (/home/freeintelligence/.nvm/versions/node/v10.5.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.15
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (/home/freeintelligence/Android/Sdk)
   NodeJS            : v10.5.0 (/home/freeintelligence/.nvm/versions/node/v10.5.0/bin/node)
   npm               : 6.4.1
   OS                : Linux 4.9

Describe the Bug
I'm trying to change the ion-content color like in Ionic3 but it does not work.

Steps to Reproduce
Steps to reproduce the behavior:

1. Change the scss to change the color of the "ion-content" tag with "background-color:red !important".

[amitairos]

That's because you need to use sass variables.
Do this:
--background: red

[putopavel]

@amitairos Thank you for the response, I was also looking for this. Could you, or somebody, point me to the documentation of theese kind of SASS variables that ionic uses for their components, please?

[amitairos]

@paveltrufi I think Ionic is intending to document all of these variables. In the meantime, either look in the v4 docs for each component, or use Chrome dev console and filter styles by '--' and all of the variables for that element will appear.

[abennouna]

https://beta.ionicframework.com/docs/api/content/#css-custom-properties

[paulstelzer]

That's because you need to use sass variables.
Do this:
--background: red

@amitairos This is NOT a sass variable, this is a CSS custom property. More about it here -> https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables . Big advantage of such properties is not to use sass or scss variables, instead they are working in pure css.

And as you and @abennouna mentioned, this css custom properties are presented for each component and all global properties in the documentation.

So issue can be closed I think ;)

[freeintelligence]

And it turns out that it was not a mistake. Thank you all.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.