$core-dark-text-color: $white !default;
$core-dark-text-secondary-color: $gray-light !default;
$core-dark-link-color: $blue-light !default;

$core-dark-item-bg-color: $gray-darker !default;
$core-dark-item-divider-bg-color: $black !default;
$core-dark-background-color: $gray-dark !default;

// Login.
$core-dark-login-page-background-color: radial-gradient(white, $gray-dark) !default;
$core-dark-login-box-background-color: $black !default;
$core-dark-login-box-background-border: $core-login-box-background-border !default;
$core-dark-login-box-text-color: $core-dark-text-color !default;
$core-dark-login-item-inner-background-color: $core-dark-login-box-background-color !default;
$core-dark-login-item-background-color: $core-dark-login-box-background-color !default;
$core-dark-login-button-outline: $core-login-button-outline !default;
$core-dark-login-loading-color: $core-dark-text-color !default;

ion-app.app-root .ion-page {
  @include darkmode() {
    color: $core-dark-text-color;
    background-color: $core-dark-item-bg-color;

    a:not(.button) {
      color: $core-dark-link-color;
    }

    .core-tabs-bar *,
    .core-tabs-bar .tab-slide,
    .ion-page,
    .item,
    .item-select,
    ion-card,
    .card-header {
        color: $core-dark-text-color;
        background-color: $core-dark-item-bg-color;

        h1, h2, h3, h4, h5, h6,
        ion-icon,
        .label {
          color: $core-dark-text-color;
        }

        @each $color-name, $color-base, $color-contrast in get-colors($colors-dark) {
          .icon-md-#{$color-name},
          .icon-ios-#{$color-name},
          .icon-wp-#{$color-name} {
            color: $color-base;
          }
        }
        p {
          color: $core-dark-text-secondary-color;
        }
    }

    .item-divider,
    .item-divider .item-inner {
      color: $core-dark-text-color;
      background-color: $core-dark-item-divider-bg-color;
    }

    .item.item-ios:active,
    .item.item-ios.activated,
    .item.item-md:active,
    .item.item-md.activated,
    .item.item-wp:active,
    .item.item-wp.activated {
      background-color: $core-dark-background-color;
    }

    .content,
    .content-md,
    .content-ios,
    .content-wp {
      color: $core-dark-text-color;
      background-color: $core-dark-background-color;
    }

    .button,
    .button-md-light,
    .button-ios-light,
    .button-wp-light,
    .button-outline {
      ion-icon {
        color: inherit;
      }
    }

    .toolbar-md-light .toolbar-background,
    .toolbar-ios-light .toolbar-background,
    .toolbar-wp-light .toolbar-background {
      background-color: $core-dark-item-divider-bg-color;
      color: $core-dark-text-color;
    }

    .button.button-clear-md-dark,
    .button.button-clear-ios-dark,
    .button.button-clear-wp-dark {
      .button-inner ion-icon {
        color: $core-dark-text-color;
      }
    }

    .button-outline {
      background-color: $core-dark-item-bg-color;
    }

    ion-refresher {
      .refresher-pulling-icon,
      .refresher-refreshing-icon,
      .refresher-pulling-icon ion-icon,
      .refresher-refreshing-icon ion-icon,
      ion-icon {
        color: $refresher-icon-color;
      }

      .refresher-pulling-text,
      .refresher-refreshing-text {
        color: $core-dark-text-color;
      }
    }
  }
}