$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; } } } }