141 lines
3.7 KiB
SCSS
141 lines
3.7 KiB
SCSS
$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: $gray-dark !default;
|
|
$core-dark-background-color: $black !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 {
|
|
@include darkmode() {
|
|
ion-action-sheet .action-sheet-container .action-sheet-group .action-sheet-button {
|
|
color: $core-dark-text-color;
|
|
|
|
&.action-sheet-selected {
|
|
color: $core-color;
|
|
background-color: $black;
|
|
}
|
|
&.activated {
|
|
background-color: $black;
|
|
}
|
|
}
|
|
|
|
.ion-page,
|
|
ion-popover .popover-content,
|
|
ion-alert .alert-wrapper,
|
|
ion-action-sheet .action-sheet-container .action-sheet-group,
|
|
ion-loading .loading-wrapper {
|
|
color: $core-dark-text-color;
|
|
background-color: $core-dark-item-bg-color;
|
|
|
|
a:not(.button) {
|
|
color: $core-dark-link-color;
|
|
}
|
|
|
|
.alert-message {
|
|
color: $core-dark-text-color;
|
|
}
|
|
|
|
.core-tabs-bar,
|
|
.core-tabs-bar *,
|
|
.core-tabs-bar .tab-slide,
|
|
.ion-page,
|
|
.item,
|
|
.item-select,
|
|
ion-card,
|
|
.card-header,
|
|
.card-content {
|
|
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} {
|
|
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.activated {
|
|
&.item-ios,
|
|
&.item-md {
|
|
background-color: $core-dark-background-color;
|
|
}
|
|
}
|
|
|
|
.content,
|
|
.content-md,
|
|
.content-ios {
|
|
color: $core-dark-text-color;
|
|
background-color: $core-dark-background-color;
|
|
}
|
|
|
|
.button,
|
|
.button-md-light,
|
|
.button-ios-light,
|
|
.button-outline {
|
|
ion-icon {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.toolbar-md-light .toolbar-background,
|
|
.toolbar-ios-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-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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|