diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0ec7f32..0837c48 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -13,7 +13,7 @@
             Navigate
           </ion-list-header>
 
-          <tree-root [nodes]="nodes" [options]="options"></tree-root>
+          <!-- <tree-root [nodes]="nodes" [options]="options"></tree-root> -->
         </ion-list>
       </ion-content>
       <ion-footer>
@@ -22,7 +22,7 @@
           <ion-label>
             Dark mode
           </ion-label>
-          <ion-toggle id="themeToggle" slot="end"></ion-toggle>
+          <ion-toggle (ionChange)="toggleDark()" id="themeToggle" slot="end"></ion-toggle>
         </ion-item>
       </ion-footer>
     </ion-menu>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 015d4ed..40c3666 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -31,6 +31,7 @@ export class AppComponent {
 
   public nodes = [];
 
+  public darkMode = false;
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
@@ -52,4 +53,14 @@ export class AppComponent {
       this.splashScreen.hide();
     });
   }
+
+  toggleDark() {
+    this.darkMode = !this.darkMode;
+    console.log("toggel Dark mode");
+    if (this.darkMode) {
+      console.log("Dark Mode On");
+    } else {
+      console.log("Dark Mode Off");
+    }
+  }
 }