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

Ionic Framework
1

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.

screenshot
screenshot351×732 4.82 KB

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?

2

Where is your theme/variables.scss being imported/included?

3

in angular.json.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              "src/manifest.webmanifest"
            ],
            "styles": ["src/theme/variables.scss", "src/global.scss"],
            "scripts": [],
            "aot": false,
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true,
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json",
            "allowedCommonJsDependencies": ["html2canvas", "localforage"]
          },
4

I was able to get it working again by importing the variables at the top of global.scss.

1 Like
5

Starting in Ionic 8 the colors are part of Ionic itself, my guess is that they are being loaded after your colors hence overriding them.

Try changing the order:

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

This is the order in the starter project - starters/angular/base/angular.json at e036e1f277d2d7b6ed5d512c66de399c93ebcc43 · ionic-team/starters · GitHub

The order was changed in this PR - fix(angular): variables gets loaded after global by liamdebeasi · Pull Request #1834 · ionic-team/starters · GitHub.

6

I removed my import from global.scss and reversed the order but im still getting default colors and not the values specified in variables.scss

7

Hmmm…not sure then. Reordering seems to be the fix per the PR I shared. Maybe double check the Upgrade Guides and look at the starter project to see if something was missed while upgrading Ionic?

8

I had the same problem. This works. Thx!