html.ion-palette-dark {
  /* Dark Colors */
  &:root {
    --ion-color-primary-fixed: #428cff; /* always blue always blue! */

    --lightroom-bg: rgba(255, 255, 255, 0.08);

    --ion-item-border-color: #333;
  }

  body {
    --ion-color-primary: var(--app-primary);
    --ion-color-primary-rgb: 66, 140, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3a7be0;
    --ion-color-primary-tint: #5598ff;

    --ion-color-secondary: #50c8ff;
    --ion-color-secondary-rgb: 80, 200, 255;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #46b0e0;
    --ion-color-secondary-tint: #62ceff;

    --ion-color-tertiary: #6a64ff;
    --ion-color-tertiary-rgb: 106, 100, 255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #5d58e0;
    --ion-color-tertiary-tint: #7974ff;

    --ion-color-success: #00940c;
    --ion-color-success-rgb: 0, 148, 12;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 255, 255, 255;
    --ion-color-success-shade: #00820b;
    --ion-color-success-tint: #1a9f24;

    --ion-color-warning: #eac200;
    --ion-color-warning-rgb: 234, 194, 0;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #ceab00;
    --ion-color-warning-tint: #ecc81a;

    --ion-color-danger: #ff4961;
    --ion-color-danger-rgb: 255, 73, 97;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #e04055;
    --ion-color-danger-tint: #ff5b71;

    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244, 245, 248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0, 0, 0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;

    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152, 154, 162;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0, 0, 0;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;

    --ion-color-medium2: rgb(112, 113, 120);

    --thick-separator-color: rgba(255, 255, 255, 0.08);

    --unread-item-background-color: #162f4a;

    --ion-color-text-aside: rgba(255, 255, 255, 0.65);

    --read-color: rgba(255, 255, 255, 0.6);
    --read-color-medium: rgba(255, 255, 255, 0.4);

    --share-img-drop-shadow: drop-shadow(0 0 8px black);

    --ion-color-reddit-upvote: #f26700;
  }

  /* TODO test other themes */
  ion-modal.transparent-scroll.dark {
    --ion-background-color: inherit;
  }

  /* iOS Dark Theme */

  &.ios body {
    /* --ion-text-color: #ddd;
      --ion-text-color-rgb: 255, 255, 255; */

    --ion-item-background: var(--ion-background-color);

    --ion-card-background: #1c1c1d;

    --ion-toolbar-background: var(--ion-background-color);
  }

  &.ios ion-modal {
    --ion-background-color: var(--ion-background-color-step-100);
    --ion-toolbar-background: var(--ion-background-color-step-150);
    --ion-toolbar-border-color: var(--ion-background-color-step-250);
    --ion-item-background: var(--ion-background-color-step-50);
  }

  @media (max-width: 767px) {
    &.ios ion-modal:not(.small, .transparent-scroll) {
      --ion-background-color: #000;
      --ion-toolbar-background: var(--ion-background-color);
      --ion-toolbar-border-color: var(--ion-background-color-step-150);
    }
  }

  /* Material Design Dark Theme */
}
