Styling Specific Elements for Dark Theme

Ionic Framework
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