qa-etodo/src/global.scss

/*
 * 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.class.css";
/* 主题颜色定义（强制覆盖） */
body {
  --ion-background-color: #ffffff !important;
  --ion-text-color: #000000 !important;
  --ion-toolbar-background: #f8f9fa !important;
}

body.dark {
  @import "@ionic/angular/css/palettes/dark.class.css";
  --ion-background-color: #121212 !important;
  --ion-text-color: #ffffff !important;
  --ion-toolbar-background: #1a1a1a !important;
  --ion-border-color: rgba(255, 255, 255, 0.12) !important;
  --ion-item-border-color: var(--ion-border-color);

  /* 增强对比度 */
  --ion-color-primary: #4a8cff !important;
  --ion-color-medium: #cccccc !important;
  ion-checkbox {
    --border-width: 2px;
    --border-color: var(--ion-color-medium) !important;
    --background: rgba(255, 255, 255, 0.1) !important;
    --checkbox-background-checked: var(--ion-color-primary);
  }
  ion-icon {
    color: var(--ion-color-medium);
  }
}

/* 添加安全区域处理 */
ion-tab-bar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* 调整标题居中 */
  ion-toolbar {
    ion-title {
      text-align: center;
    }
  }

  /* 调整我的页面标题位置 */
  app-tab4 {
    ion-toolbar {
      ion-title {
        text-align: left;
        padding-left: 12px;
      }
    }
  }