Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Active Background color of <ion-item> does not look right in dark-mode #18449

matthewkremer opened this issue Jun 3, 2019 · 1 comment


2 participants
Copy link

commented Jun 3, 2019

Bug Report

Ionic version:

[x] 4.4.1

Current behavior:

When following along with an example like our Dark Mode blog post ( the active state of List Items looks off putting as it is way too light, almost text colored.

Expected behavior:

I would expect the color to be a variant of an existing variable that is modified. Such as using a step color based off the theme variables.

Steps to reproduce:

Related code:

Add the following code to an Ionic project with a list (such as side-menu starter):

Then click on the and get blasted by the color of bright white in dark mode.

--ion-border-color: var(--ion-color-dark-shade);
    --ion-background-color: var(--ion-color-dark);
    --ion-background-color-rgb: var(--ion-color-dark-rgb);
    --ion-text-color: var(--ion-color-light);
    --ion-text-color-rgb: var(--ion-color-light-rgb);

    --ion-color-step-50: #232323;
    --ion-color-step-100: #2e2e2e;
    --ion-color-step-150: #3a3a3a;
    --ion-color-step-200: #454545;
    --ion-color-step-250: #515151;
    --ion-color-step-300: #5d5d5d;
    --ion-color-step-350: #8b8b8b;
    --ion-color-step-400: #747474;
    --ion-color-step-450: #7f7f7f;
    --ion-color-step-500: #8b8b8b;
    --ion-color-step-550: #979797;
    --ion-color-step-600: #a2a2a2;
    --ion-color-step-650: #aeaeae;
    --ion-color-step-700: #b9b9b9;
    --ion-color-step-750: #c5c5c5;
    --ion-color-step-800: #d1d1d1;
    --ion-color-step-850: #dcdcdc;
    --ion-color-step-900: #e8e8e8;
    --ion-color-step-950: #f3f3f3;

Other information:

Ionic info:

  ionic (Ionic CLI)             : 5.0.0-beta.2 (/Users/mattkremer/.ionic/Studio/Tools/lib/node_modules/ionic)
  Ionic Framework               : @ionic/angular 4.4.1
  @angular-devkit/build-angular : 0.13.9
  @angular-devkit/schematics    : 7.3.9
  @angular/cli                  : 7.3.9
  @ionic/angular-toolkit        : 1.5.1


  cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
  Cordova Platforms     : ios 5.0.1
  Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 5 other plugins)


  cordova-res : 0.2.0
  native-run  : 0.0.21


  ios-deploy : 1.9.4
  ios-sim    : 8.0.1
  NodeJS     : v10.13.0 (/Users/mattkremer/.nvm/versions/node/v10.13.0/bin/node)
  npm        : 6.8.0
  OS         : macOS Mojave
  Xcode      : Xcode 10.2.1 Build version 10E1001

@ionitron-bot ionitron-bot bot added the triage label Jun 3, 2019

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Jun 3, 2019

@brandyscarney brandyscarney self-assigned this Jun 3, 2019

@ionitron-bot ionitron-bot bot removed the triage label Jun 3, 2019


This comment has been minimized.

Copy link

commented Jun 3, 2019

brandyscarney added a commit that referenced this issue Jun 3, 2019

Ionic Core automation moved this from Backlog 🤖 to Done 🎉 Jun 3, 2019

brandyscarney added a commit that referenced this issue Jun 3, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.