Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 49362

Variables.scss seems to be ignored after upgrading from ionic 6 to 7 to 8

$
0
0

I have finally finished upgrading my app from ionic 6 to 8 and for some reason all of my css variables are being ignored.

Here are the contents of theme/variables.scss

:root {
  --ion-color-primary: #3B7125;
	--ion-color-primary-rgb: 59,113,37;
	--ion-color-primary-contrast: #ffffff;
	--ion-color-primary-contrast-rgb: 255,255,255;
	--ion-color-primary-shade: #346321;
	--ion-color-primary-tint: #4f7f3b;

	--ion-color-secondary: #9BD394;
	--ion-color-secondary-rgb: 155,211,148;
	--ion-color-secondary-contrast: #000000;
	--ion-color-secondary-contrast-rgb: 0,0,0;
	--ion-color-secondary-shade: #88ba82;
	--ion-color-secondary-tint: #a5d79f;

	--ion-color-tertiary: #A2BCA3;
	--ion-color-tertiary-rgb: 162,188,163;
	--ion-color-tertiary-contrast: #000000;
	--ion-color-tertiary-contrast-rgb: 0,0,0;
	--ion-color-tertiary-shade: #8fa58f;
	--ion-color-tertiary-tint: #abc3ac;

	--ion-color-success: #2dd36f;
	--ion-color-success-rgb: 45,211,111;
	--ion-color-success-contrast: #000000;
	--ion-color-success-contrast-rgb: 0,0,0;
	--ion-color-success-shade: #28ba62;
	--ion-color-success-tint: #42d77d;

	--ion-color-warning: #ffc409;
	--ion-color-warning-rgb: 255,196,9;
	--ion-color-warning-contrast: #000000;
	--ion-color-warning-contrast-rgb: 0,0,0;
	--ion-color-warning-shade: #e0ac08;
	--ion-color-warning-tint: #ffca22;

	--ion-color-danger: #eb445a;
	--ion-color-danger-rgb: 235,68,90;
	--ion-color-danger-contrast: #ffffff;
	--ion-color-danger-contrast-rgb: 255,255,255;
	--ion-color-danger-shade: #cf3c4f;
	--ion-color-danger-tint: #ed576b;

	--ion-color-medium: #92949c;
	--ion-color-medium-rgb: 146,148,156;
	--ion-color-medium-contrast: #000000;
	--ion-color-medium-contrast-rgb: 0,0,0;
	--ion-color-medium-shade: #808289;
	--ion-color-medium-tint: #9d9fa6;

	--ion-color-light: #f4f5f8;
	--ion-color-light-rgb: 244,245,248;
	--ion-color-light-contrast: #000000;
	--ion-color-light-contrast-rgb: 0,0,0;
	--ion-color-light-shade: #d7d8da;
	--ion-color-light-tint: #f5f6f9;
}


as you can see from the screenshot below the default ionic colors are rendered.

And here is my project info:
Ionic:

Ionic CLI : 7.2.0 (C:\Users\Josh\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.4.1
@angular-devkit/build-angular : 17.3.11
@angular-devkit/schematics : 17.3.11
@angular/cli : 17.3.11
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.2.0
@capacitor/android : 6.2.0
@capacitor/core : 6.2.0
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v18.20.5 (C:\Program Files\nodejs\node.exe)
npm : 10.9.0
OS : Windows 10

Anyone know what the issue could be?

1 post - 1 participant

Read full topic


Viewing all articles
Browse latest Browse all 49362

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>