/* * App Global CSS * ---------------------------------------------------------------------------- * Put style rules here that you want to apply globally. These styles are for * the entire app and not just one component. Additionally, this file can be * used as an entry point to import other CSS/Sass files to be included in the * output CSS. * For more information on global stylesheets, visit the documentation: * https://ionicframework.com/docs/layout/global-stylesheets */ /* Core CSS required for Ionic components to work properly */ @import "@ionic/angular/css/core.css"; /* Basic CSS for apps built with Ionic */ @import "@ionic/angular/css/normalize.css"; @import "@ionic/angular/css/structure.css"; @import "@ionic/angular/css/typography.css"; @import "@ionic/angular/css/display.css"; /* Optional CSS utils that can be commented out */ @import "@ionic/angular/css/padding.css"; @import "@ionic/angular/css/float-elements.css"; @import "@ionic/angular/css/text-alignment.css"; @import "@ionic/angular/css/text-transformation.css"; @import "@ionic/angular/css/flex-utils.css"; /** * Ionic Dark Mode * ----------------------------------------------------- * For more info, please see: * https://ionicframework.com/docs/theming/dark-mode */ /* @import "@ionic/angular/css/palettes/dark.always.css"; */ /* @import "@ionic/angular/css/palettes/dark.class.css"; */ @import '@ionic/angular/css/palettes/dark.system.css'; /* global.scss */ /* 暖色主题 */ .warm-theme { --background: #f9e79f; /* 浅黄色背景 */ --ion-background-color: #f9e79f; /* 确保背景颜色生效 */ --ion-color-warning: #ffcc80; /* 暖色按钮颜色 */ --ion-color-danger: #ffcdd2; /* 粉色按钮颜色 */ } /* 粉色主题 */ .pink-theme { --background: #fce4ec; /* 浅粉色背景 */ --ion-background-color: #fce4ec; /* 确保背景颜色生效 */ --ion-color-warning: #ffe0b2; /* 暖色按钮颜色 */ --ion-color-danger: #ffc0cb; /* 粉色按钮颜色 */ } .default-theme { --background: #ffffff; /* 白色背景 */ --ion-background-color: #ffffff; /* 确保背景颜色生效 */ } :root { --ion-color-pink: #ffc0cb; /* 粉色 */ --ion-color-pink-rgb: 255, 192, 203; --ion-color-pink-contrast: #000000; /* 黑色文字以确保可读性 */ --ion-color-pink-shade: #d7aebb; --ion-color-pink-tint: #ffe6eb; }