事件完成，颜色未完成

src/app/tab4/tab4.page.html

@@ -15,16 +15,16 @@
       <ion-label>本周完成</ion-label>
       <ion-badge slot="end" color="primary">12 任务</ion-badge>
     </ion-item>
-    
+
     <ion-item>
       <ion-label>连续打卡</ion-label>
       <ion-badge slot="end" color="primary">7 天</ion-badge>
     </ion-item>
-    
+
     <ion-item>
       <ion-icon slot="start" name="moon"></ion-icon>
       <ion-label>暗色模式</ion-label>
-      <ion-toggle slot="end"></ion-toggle>
+      <ion-toggle slot="end" [(ngModel)]="isDarkMode" (ionChange)="onThemeChange($event)"></ion-toggle>
     </ion-item>
   </ion-list>
-</ion-content>
+</ion-content>

src/app/tab4/tab4.page.ts

@@ -7,10 +7,24 @@ import { Component, OnInit } from '@angular/core';
   standalone: false,
 })
 export class Tab4Page implements OnInit {
+  isDarkMode = false;
 
-  constructor() { }
+  constructor() {
+    const savedTheme = localStorage.getItem('theme');
+    this.isDarkMode = savedTheme === 'dark';
+    this.toggleDarkTheme(this.isDarkMode);
+  }
 
   ngOnInit() {
   }
 
+  toggleDarkTheme(shouldAdd: boolean) {
+    document.body.classList.toggle('dark', shouldAdd);
+    localStorage.setItem('theme', shouldAdd ? 'dark' : 'light');
+  }
+
+  onThemeChange(event: any) {
+    this.isDarkMode = event.detail.checked;
+    this.toggleDarkTheme(this.isDarkMode);
+  }
 }

src/global.scss

@@ -35,19 +35,31 @@
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
 @import "@ionic/angular/css/palettes/dark.system.css";
+/* 主题颜色定义 */
+:root {
+  --ion-background-color: #ffffff;
+  --ion-text-color: #000000;
+}
+
+.dark {
+  --ion-background-color: #1a1a1a;
+  --ion-text-color: #ffffff;
+  --ion-border-color: #333333;
+}
+
 /* 添加安全区域处理 */
 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 {
@@ -56,4 +68,4 @@ ion-tab-bar {
         padding-left: 12px;
       }
     }
-  }
+  }