Change default theme and theme order

src/app/components/shared/header/header.component.html

@@ -9,17 +9,15 @@
     <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
       <mat-grid-list cols="2">
         <mat-grid-tile>
-          <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
-            <mat-icon class="color-icon">
-              lens
-              <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</mat-icon>
-            </mat-icon>
+          <button mat-icon-button class="dark color-button" (click)="changeTheme('dark')">
+            <mat-icon class="color-icon">lens</mat-icon>
+            <mat-icon *ngIf="themeClass === 'dark'" class="check">check_circle</mat-icon>
           </button>
         </mat-grid-tile>
         <mat-grid-tile>
-          <button mat-icon-button class="dark color-button" (click)="changeTheme('dark')">
+          <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
             <mat-icon class="color-icon">lens</mat-icon>
-            <mat-icon *ngIf="themeClass === 'dark'" class="check">check_circle</mat-icon>
+            <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</mat-icon>
           </button>
         </mat-grid-tile>
         <mat-grid-tile>

src/theme/dark-theme/darkTheme.const.ts

@@ -20,7 +20,7 @@ export const dark = {
   '--yellow': '#FFD54F',
   '--blue': '#3f51b5',
   '--purple': '#9c27b0',
-  '--mint': '#80ba24',
+  '--light-green': '#80ba24',
   '--grey': '#BDBDBD',
   '--grey-light': '#9E9E9E',
   '--black': '#212121'

src/theme/theme.directive.ts

@@ -10,7 +10,7 @@ import { Subscription } from 'rxjs';
 
 export class ThemeDirective implements OnInit, OnDestroy {
 
-  private themeName = 'arsnova';
+  private themeName = 'dark';
   private themServiceSubscription: Subscription;
 
   constructor(private elementRef: ElementRef,