Styling Specific Elements for Dark Theme

Ionic Framework
1

How can I go about creating custom styles for specific elements within the dark theme?

For example I have an <ion-list> of brightly colored <ion-item> elements in the light theme.

ui_light
ui_light1442×3121 131 KB

But the contrast of these bright elements to their dark surroundings in the dark theme is just too much.

ui_dark_wrong
ui_dark_wrong1442×3121 139 KB

So I thought I’d go and invert all the colors for the dark theme (grays as the standard color/tint/shade and the actual color as the contrast element). This looks great, but of course causes tons of UI bugs. At least it shows what I am going for.

ui_dark_ideal
ui_dark_ideal1442×3121 143 KB

So what I would like to do is add specific styles for a few specific elements to override the dark theme’s defaults and moderate the colors.

I thought I could do something like:

.md .dark {
  ion-item.ion-color-success {
    --ion-background-color: #1e1e1e;
  }
}

But nothing happens. How can I could about creating custom styles that are only activated for specific <ion-button> or <ion-item> elements only if the dark theme is enabled? Where should these styles be defined?

To be clear I am not trying to override the background color for ALL <ion-item> elements as you can do in the dark theme section of variables.scss.

2

I fixed it with these little tweaks:

.md .dark {
  ion-item.ion-color-danger {
    --ion-color-base: #1e1e1e !important;
    --ion-color-contrast: #f53d3d !important;
  }

  ion-item.ion-color-warning {
    --ion-color-base: #1e1e1e !important;
    --ion-color-contrast: #ffcb05 !important;
  }

  ion-item.ion-color-success {
    --ion-color-base: #1e1e1e !important;
    --ion-color-contrast: #10dc60 !important;
  }

  ion-item.ion-color-primary {
    --ion-color-base: #1e1e1e !important;
    --ion-color-contrast: #488aff !important;
  }

  ion-card.ion-color-danger {
    --ion-color-base: #1e1e1e !important;
    --ion-color-contrast: #f53d3d !important;
  }

  ion-card.ion-color-warning {
    --ion-color-base: #1e1e1e !important;
    --ion-color-contrast: #ffcb05 !important;
  }

  ion-card.ion-color-success {
    --ion-color-base: #1e1e1e !important;
    --ion-color-contrast: #10dc60 !important;
  }

  ion-card.ion-color-primary {
    --ion-color-base: #1e1e1e !important;
    --ion-color-contrast: #488aff !important;
  }

  ion-content {
    ion-button.ion-color-danger {
      --ion-color-base: #1e1e1e !important;
      --ion-color-contrast: #f53d3d !important;
    }

    ion-button.ion-color-warning {
      --ion-color-base: #1e1e1e !important;
      --ion-color-contrast: #ffcb05 !important;
    }

    ion-button.ion-color-success {
      --ion-color-base: #1e1e1e !important;
      --ion-color-contrast: #10dc60 !important;
    }

    ion-button.ion-color-primary {
      --ion-color-base: #1e1e1e !important;
      --ion-color-contrast: #488aff !important;
    }
  }
}
1 Like