CODEWITHSUNDEEP
ionic-frameworkionic4
Luis Miguel
Luis Miguel

Reputation: 777

Ionic 4 CSS Variables

I'm trying to use the variables defined on the variables.scss file, but remote debugging the app i see that no variable was defined on :root and on the elements that use it has Invalid value.

variables.scss

:root {
  /** primary **/
  --ion-color-primary: #d76f47;

  ... more variables
}

page.scss:

.product-name {
   color: var(----ion-color-primary);
}

angular.json (untouched)

...

"styles": [
  {
     "input": "src/theme/variables.scss"
  },
  {
     "input": "src/global.scss"
  }
],

...

This only happens while runing on the device (Android 4.4.2). While on the browser everything works as it should be.

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.2, browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.3, (and 6 other plugins)

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v9.10.1 (/usr/local/bin/node)
   npm               : 6.2.0
   OS                : Linux 4.15

Thanks in advance.

Upvotes: 0

Views: 1439

Answers (1)

Bassam
Bassam

Reputation: 856

If you want to change color for your custom dom

.product-name {
   color: var(--ion-color-primary);
}

but for the dom that has shadow root maybe you should to confirm if it has variable 

dom-name {
   --color: var(----ion-color-primary); //if dom declare --color as css4 variable 
}

Upvotes: 2

Related Questions