126 lines
4.7 KiB
SCSS
126 lines
4.7 KiB
SCSS
/*
|
|
* App DARK theme CSS
|
|
* ----------------------------------------------------------------------------
|
|
* Ionic Variables and Theming. For more info, please see:
|
|
* http://ionicframework.com/docs/theming/
|
|
*/
|
|
|
|
:root body.dark {
|
|
|
|
// Ionic shades, defined for ionic internal use.
|
|
--ion-color-step-0: var(--black);
|
|
--ion-color-step-50: var(--gray-900);
|
|
--ion-color-step-100: var(--gray-900);
|
|
--ion-color-step-150: var(--gray-900);
|
|
--ion-color-step-200: var(--gray-800);
|
|
--ion-color-step-250: var(--gray-800);
|
|
--ion-color-step-300: var(--gray-700);
|
|
--ion-color-step-350: var(--gray-700);
|
|
--ion-color-step-400: var(--gray-600);
|
|
--ion-color-step-450: var(--gray-600);
|
|
--ion-color-step-500: var(--gray-500);
|
|
--ion-color-step-550: var(--gray-500);
|
|
--ion-color-step-600: var(--gray-400);
|
|
--ion-color-step-650: var(--gray-400);
|
|
--ion-color-step-700: var(--gray-300);
|
|
--ion-color-step-750: var(--gray-300);
|
|
--ion-color-step-800: var(--gray-200);
|
|
--ion-color-step-850: var(--gray-200);
|
|
--ion-color-step-900: var(--gray-100);
|
|
--ion-color-step-950: var(--gray-100);
|
|
--ion-color-step-1000: var(--white);
|
|
|
|
--ion-background-color: #{$background-color-dark};
|
|
--ion-background-color-rgb: #{$background-color-dark-rgb};
|
|
|
|
--text-color: #{$text-color-dark};
|
|
--ion-text-color: var(--text-color);
|
|
--ion-text-color-rgb: #{$text-color-dark-rgb};
|
|
--subdued-text-color: var(--gray-400);
|
|
|
|
--ion-card-color: var(--text-color);
|
|
--ion-card-background: var(--ion-item-background);
|
|
|
|
--contrast-background: black;
|
|
|
|
--stroke: var(--gray-700);
|
|
--ion-border-color: var(--stroke);
|
|
--ion-item-border-color: var(--stroke);
|
|
|
|
ion-content {
|
|
--background: var(--ion-background-color);
|
|
--background-alternative: var(--gray-900);
|
|
}
|
|
|
|
--core-bottom-tabs-badge-text-color: var(--brand-contrast);
|
|
--core-bottom-tabs-background: var(--gray-900);
|
|
--core-bottom-tabs-color: var(--medium);
|
|
|
|
ion-action-sheet {
|
|
.action-sheet-cancel {
|
|
--button-color: var(--danger-tint);
|
|
}
|
|
}
|
|
|
|
--core-link-color: var(--primary-tint);
|
|
|
|
--core-header-toolbar-background: var(--gray-900);
|
|
--core-header-toolbar-color: var(--white);
|
|
|
|
--core-tabs-background: var(--gray-800);
|
|
--core-tab-background: var(--core-tabs-background);
|
|
--core-tab-color: var(--subdued-text-color);
|
|
--core-tab-border-color: var(--gray-200);
|
|
--core-tab-color-active: var(--dark);
|
|
|
|
--core-progressbar-text-color: var(--light);
|
|
|
|
--ion-item-background: #{$ion-item-background-dark};
|
|
--ion-item-detail-icon-color: var(--white);
|
|
--item-divider-background: var(--gray-800);
|
|
--item-divider-color: var(--text-color);
|
|
--spacer-background: var(--gray-100);
|
|
|
|
--core-combobox-background: var(--ion-item-background);
|
|
--core-combobox-color: var(--white);
|
|
|
|
--core-login-background: var(--gray-900);
|
|
--core-login-text-color: var(--white);
|
|
--core-login-input-background: var(--core-login-background);
|
|
--core-login-input-color: var(--core-login-text-color);
|
|
|
|
--core-question-correct-color: var(--success-tint);
|
|
--core-question-correct-color-bg: var(--success-shade);
|
|
--core-question-incorrect-color: var(--danger);
|
|
--core-question-incorrect-color-bg: var(--danger-shade);
|
|
--core-question-feedback-color: var(--warning-tint);
|
|
--core-question-feedback-color-bg: var(--warning-shade);
|
|
--core-question-warning-color: var(--danger);
|
|
--core-question-saved-color-bg: var(--gray-500);
|
|
|
|
--core-question-state-correct-color: var(--success-shade);
|
|
--core-question-state-partial-color: var(--warning-shade);
|
|
--core-question-state-partial-text: var(--warning);
|
|
--core-question-state-incorrect-color: var(--danger-shade);
|
|
|
|
--core-question-feedback-color: var(--warning-tint);
|
|
--core-question-feedback-background-color: var(--warning-shade);
|
|
|
|
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-200);
|
|
--core-dd-question-border: var(--gray-200);
|
|
|
|
--core-send-message-input-background: var(--gray-900);
|
|
--core-send-message-input-color: var(--white);
|
|
|
|
--addon-messages-message-bg: var(--gray-800);
|
|
--addon-messages-message-activated-bg: var(--gray-700);
|
|
--addon-messages-message-note-text: var(--subdued-text-color);
|
|
--addon-messages-message-mine-bg: var(--gray-700);
|
|
--addon-messages-message-mine-activated-bg: var(--gray-600);
|
|
--addon-messages-discussion-badge: var(--primary);
|
|
--addon-messages-discussion-badge-text: var(--dark);
|
|
|
|
--addon-forum-border-color: var(--gray-500);
|
|
--addon-forum-highlight-color: var(--medium);
|
|
}
|