diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index 83ed552e6b1236f054153cb0a2659b2df3852648..99a99e97db910920033695fa01b04527965a867f 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -46,6 +46,13 @@
 
     <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
       <mat-grid-list cols="2">
+        <mat-grid-tile *ngFor="let theme of themes">
+          <button mat-icon-button [ngStyle]="{'color':theme.previewColor}" (click)="changeTheme(theme)">
+            <mat-icon class="color-icon" matTooltip="{{theme.name}}">lens</mat-icon>
+            <mat-icon *ngIf="themeClass === theme.name" class="check">check_circle</mat-icon>
+          </button>
+        </mat-grid-tile>
+        <!--
         <mat-grid-tile>
           <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
             <mat-icon class="color-icon" matTooltip="{{ 'footer.bright' | translate }}">lens</mat-icon>
@@ -70,6 +77,7 @@
             <mat-icon *ngIf="themeClass === 'blue'" class="check">check_circle</mat-icon>
           </button>
         </mat-grid-tile>
+        -->
       </mat-grid-list>
     </mat-menu>
 
diff --git a/src/app/components/shared/footer/footer.component.ts b/src/app/components/shared/footer/footer.component.ts
index 340e5f1b199c798bdaa7e5fe955b9986a555f003..aa9b3faa8e3692f47fa37f9ca7f3bec6b4aab8dc 100644
--- a/src/app/components/shared/footer/footer.component.ts
+++ b/src/app/components/shared/footer/footer.component.ts
@@ -9,6 +9,7 @@ import { User } from '../../../models/user';
 import { Room } from '../../../models/room';
 import { DemoVideoComponent } from '../../home/_dialogs/demo-video/demo-video.component';
 import { ThemeService } from '../../../../theme/theme.service';
+import { Theme } from '../../../../theme/Theme';
 
 @Component({
   selector: 'app-footer',
@@ -17,18 +18,20 @@ import { ThemeService } from '../../../../theme/theme.service';
 })
 export class FooterComponent implements OnInit {
 
-  blogUrl = 'https://arsnova.thm.de/blog/';
-  dsgvoUrl = 'https://arsnova.thm.de/blog/datenschutzerklaerung/';
-  imprUrl = 'https://arsnova.thm.de/blog/impressum/';
-  demoId = '78844652';
+  public blogUrl = 'https://arsnova.thm.de/blog/';
+  public dsgvoUrl = 'https://arsnova.thm.de/blog/datenschutzerklaerung/';
+  public imprUrl = 'https://arsnova.thm.de/blog/impressum/';
+  public demoId = '78844652';
 
-  room: Room;
-  user: User;
+  public room: Room;
+  public user: User;
 
-  open: string;
-  deviceType: string;
+  public open: string;
+  public deviceType: string;
 
-  themeClass = localStorage.getItem('theme');
+  public themeClass = localStorage.getItem('theme');
+
+  public themes: Theme[];
 
   constructor(public notificationService: NotificationService,
               public router: Router,
@@ -46,6 +49,7 @@ export class FooterComponent implements OnInit {
     this.translateService.get('footer.open').subscribe(message => {
       this.open = message;
     });
+    this.themes = this.themeService.getThemes();
   }
 
   navToBlog() {
@@ -111,8 +115,8 @@ export class FooterComponent implements OnInit {
     this.langService.langEmitter.emit(language);
   }
 
-  changeTheme(theme) {
-    this.themeClass = theme;
-    this.themeService.activate(theme);
+  changeTheme(theme: Theme) {
+    this.themeClass = theme.name;
+    this.themeService.activate(theme.name);
   }
 }
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 69aa606949a67d676345be03d280afed79698297..037cb561f9f59ea382f2ae61412d5389d57518a7 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar class="mat-elevation-z4">
+<mat-toolbar class="mat-elevation-z1">
   <mat-toolbar-row>
     <button mat-icon-button *ngIf="router.url !== '/home'" (click)="goBack()"
             matTooltip="{{'header.back' | translate}}">
diff --git a/src/theme/Theme.ts b/src/theme/Theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f6bb8ff78c7cda5e0c306e5116433e9d302b4bdb
--- /dev/null
+++ b/src/theme/Theme.ts
@@ -0,0 +1,13 @@
+
+
+
+export class Theme {
+
+  constructor(
+    public name: string,
+    public description: string,
+    public previewColor: string,
+    public palette: Object
+  ) {}
+
+}
diff --git a/src/theme/purple-theme/purpleTheme.const.ts b/src/theme/purple-theme/purpleTheme.const.ts
index 8a120ab88a92c9158c5f863135efb6b5cea45fcb..5189cd4708120311ae155dd4df0c1d2c0c852aaa 100644
--- a/src/theme/purple-theme/purpleTheme.const.ts
+++ b/src/theme/purple-theme/purpleTheme.const.ts
@@ -1,17 +1,17 @@
 export const purple = {
 
-  '--primary' : '#9c27b0',
-  '--primary-variant': '#d05ce3',
+  '--primary' : '#4a8270',
+  '--primary-variant': '#4a8270',
 
-  '--secondary': '#ffca28',
-  '--secondary-variant': '#fffd61',
+  '--secondary': '#4a8270',
+  '--secondary-variant': '#4a8270',
 
-  '--background': '#fafafa',
-  '--surface': '#e0e0e0',
-  '--dialog': '#f2f4f5',
+  '--background': '#d9d5b8',
+  '--surface': '#e0dcbf',
+  '--dialog': '#e0dcbf',
 
-  '--on-primary': '#FFFFFF',
-  '--on-secondary': '#000000',
+  '--on-primary': '#e0dcbf',
+  '--on-secondary': '#e0dcbf',
   '--on-background': '#000000',
   '--on-surface': '#000000',
 
diff --git a/src/theme/theme.service.ts b/src/theme/theme.service.ts
index cb045b6ea6a404e8589504496ffd6b1b0b242755..05a7a8b197bfe53d91e913f49e26a85f2c646e62 100644
--- a/src/theme/theme.service.ts
+++ b/src/theme/theme.service.ts
@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { themes } from './arsnova-theme.const';
+import { Theme } from './Theme';
 
 @Injectable({
   providedIn: 'root'
@@ -7,8 +9,14 @@ import { BehaviorSubject } from 'rxjs';
 export class ThemeService {
   themeName = localStorage.getItem('theme');
   private activeThem = new BehaviorSubject(this.themeName);
+  private themes: Theme[] = [];
 
-  constructor() { }
+  constructor() {
+    // tslint:disable-next-line:forin
+    for (const k in themes) {
+      this.themes.push(new Theme(k, k, themes[k]['--primary'], themes[k]));
+    }
+  }
 
   public getTheme() {
     return this.activeThem.asObservable();
@@ -18,4 +26,8 @@ export class ThemeService {
     this.activeThem.next(name);
     localStorage.setItem('theme', name);
   }
+
+  public getThemes(): Theme[] {
+    return this.themes;
+  }
 }