bug: Cannot change custom colors for dark mode but works for light mode

[CosmicWebServices]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

Trying to set custom primary color which changes as expected in light mode but in dark mode it keeps to the defaults.

Expected behavior:

Changes primary color to #00B9A0 (contrast #ffffff shade #00a38d tint #1ac0aa).

Steps to reproduce:

Setting device to dark mode.

Related code:

https://stackblitz.com/edit/ionic-v4-angular-tabs-xd4yjb?file=src/app/app.scss

:root {
  --ion-color-primary: #00B9A0 !important;
  --ion-color-primary-rgb: 0, 185, 160 !important;
  --ion-color-primary-contrast: #ffffff !important;
  --ion-color-primary-contrast-rgb: 255, 255, 255 !important;
  --ion-color-primary-shade: #00a38d !important;
  --ion-color-primary-tint: #1ac0aa !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ion-color-primary: #00B9A0 !important;
    --ion-color-primary-rgb: 0, 185, 160 !important;
    --ion-color-primary-contrast: #ffffff !important;
    --ion-color-primary-contrast-rgb: 255, 255, 255 !important;
    --ion-color-primary-shade: #00a38d !important;
    --ion-color-primary-tint: #1ac0aa !important;
  }
}

body.dark {
  :root {
    --ion-color-primary: #00B9A0 !important;
    --ion-color-primary-rgb: 0, 185, 160 !important;
    --ion-color-primary-contrast: #ffffff !important;
    --ion-color-primary-contrast-rgb: 255, 255, 255 !important;
    --ion-color-primary-shade: #00a38d !important;
    --ion-color-primary-tint: #1ac0aa !important;
  }
}

.ios body.dark {
  :root {
    --ion-color-primary: #00B9A0 !important;
    --ion-color-primary-rgb: 0, 185, 160 !important;
    --ion-color-primary-contrast: #ffffff !important;
    --ion-color-primary-contrast-rgb: 255, 255, 255 !important;
    --ion-color-primary-shade: #00a38d !important;
    --ion-color-primary-tint: #1ac0aa !important;
  }
}

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.7
   @angular/cli                  : 10.1.2
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res                          : 0.15.1
   native-run (update available: 1.1.0) : 1.0.0

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.14.7
   OS     : macOS Big Sur

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. Your colors do not appear to change because they are exactly the same between light and dark modes.

Additionally, the other selectors body.dark :root and .ios body.dark do not match any valid elements, so they would not apply.

[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.