fixed toggle-theme-button

src/app/components/feed/feed.component.html

@@ -16,9 +16,9 @@
     <mat-checkbox color="primary" [(ngModel)]="checked">I protected the environment.</mat-checkbox>
   </p>
   <mat-form-field id="action-chooser" *ngIf="checked">
-    <mat-label>Did you support the environment?</mat-label>
+    <mat-label>What did you do?</mat-label>
     <mat-select [(ngModel)]="selectedValue" name="action">
-      <mat-option>the next time ;)</mat-option>
+      <mat-option>nothing ;)</mat-option>
       <mat-option *ngFor="let action of actionlist.actions" [value]="action.points">
         {{action.name}}
       </mat-option>

src/app/components/main-navigation/main-navigation.component.html

@@ -55,29 +55,20 @@
           </a>
         </div>
       </nav>
-      <!--neuer shit jooooooooooooooooooooooooooooooooooooooooooooooooo--->
       <div id="menu-button-box">
       <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
         <mat-icon>more_vert</mat-icon>
       </button>
       </div>
       <mat-menu #menu="matMenu">
-        <button mat-menu-item>
+        <button mat-menu-item (click)="$event.stopPropagation();">
         <mat-slide-toggle
           color="primary"
           class="theme-button"
-          (click)="toggletheme()">
+          (change)="toggleTheme()"><!--stays white when dragged-->
           dark mode
         </mat-slide-toggle>
         </button>
-        <button mat-menu-item disabled>
-          <mat-icon>voicemail</mat-icon>
-          <span>Check voice mail</span>
-        </button>
-        <button mat-menu-item>
-          <mat-icon>notifications_off</mat-icon>
-          <span>Disable alerts</span>
-        </button>
       </mat-menu>
     </mat-toolbar>
     <router-outlet></router-outlet>

src/app/components/main-navigation/main-navigation.component.ts

@@ -27,7 +27,7 @@ export class MainNavigationComponent implements OnInit {
   profileUrl: string
 
   lighttheme : boolean = true
-
+  overlay;
 
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
     .pipe(
@@ -35,7 +35,9 @@ export class MainNavigationComponent implements OnInit {
       shareReplay()
     );
 
-  constructor(public overlayContainer: OverlayContainer, private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {}
+  constructor(public overlayContainer: OverlayContainer, private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {
+    this.overlay = overlayContainer.getContainerElement();
+  }
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
       this.user = user
@@ -61,15 +63,20 @@ export class MainNavigationComponent implements OnInit {
     { path: '/register', label: 'Register' },
   ];
   
-  public toggletheme(){
-    if(this.lighttheme){
-      this.onSetTheme("dark-theme");
-      this.lighttheme = false;
-    } else{
-      this.onSetTheme("light-theme");
-      this.lighttheme = true;
-    } 
-  }
+  toggleTheme() {
+    if (this.overlay.classList.contains("dark-theme")) {
+        this.overlay.classList.remove("dark-theme");
+        this.overlay.classList.add("light-theme");
+        this.onSetTheme("light-theme");
+    } else if (this.overlay.classList.contains("light-theme")) {
+        this.overlay.classList.remove("light-theme");
+        this.overlay.classList.add("dark-theme");
+        this.onSetTheme("dark-theme");
+    } else {
+        this.overlay.classList.add("dark-theme");
+        this.onSetTheme("dark-theme");
+    }
+}
 
   @HostBinding('class') componentCssClass;
   onSetTheme(theme) {