diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4a9cb100ca09edbf5496d94d398ecb2f196eabc7..0012a9609dc2aafd912c91981a5a9339f7c74c62 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -80,6 +80,8 @@ import { AuthenticationInterceptor } from './interceptors/authentication.interce
 import { HeaderComponent } from './components/fragments/header/header.component';
 import { FooterComponent } from './components/fragments/footer/footer.component';
 import { FooterLoginDialogComponent } from './components/dialogs/footer-login-dialog/footer-login-dialog.component';
+import { ThemeSwitcherComponent } from './components/fragments/theme-switcher/theme-switcher.component';
+import { OverlayModule } from '@angular/cdk/overlay';
 
 @NgModule({
   declarations: [
@@ -114,7 +116,8 @@ import { FooterLoginDialogComponent } from './components/dialogs/footer-login-di
     ContentTextCreatorComponent,
     HeaderComponent,
     FooterComponent,
-    FooterLoginDialogComponent
+    FooterLoginDialogComponent,
+    ThemeSwitcherComponent
   ],
   entryComponents: [
     RegisterComponent,
@@ -162,7 +165,8 @@ import { FooterLoginDialogComponent } from './components/dialogs/footer-login-di
     MatToolbarModule,
     MatTooltipModule,
     ReactiveFormsModule,
-    HttpClientModule
+    HttpClientModule,
+    OverlayModule
   ],
   providers: [
     {
@@ -177,7 +181,8 @@ import { FooterLoginDialogComponent } from './components/dialogs/footer-login-di
     RoomService,
     CommentService,
     ContentService,
-    ContentAnswerService
+    ContentAnswerService,
+    ThemeSwitcherComponent
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/components/fragments/footer/footer.component.html b/src/app/components/fragments/footer/footer.component.html
index b85e5da66eceb4146ea6caba33be1e5b936c2db3..78dddd65ae6a100e291672c4d13381131c6d6daf 100644
--- a/src/app/components/fragments/footer/footer.component.html
+++ b/src/app/components/fragments/footer/footer.component.html
@@ -6,9 +6,7 @@
     <div class="container">
       <mat-list role="list">
         <h3 mat-subheader>Change Theme</h3>
-        <mat-list-item role="listitem">
-          <mat-slide-toggle></mat-slide-toggle>
-        </mat-list-item>
+<app-theme-switcher></app-theme-switcher>
       </mat-list>
       <mat-nav-list>
         <h3 mat-subheader>Login</h3>
diff --git a/src/app/components/fragments/footer/footer.component.ts b/src/app/components/fragments/footer/footer.component.ts
index 5f750688c699c88d2e745390ff19b338b839e89b..f74ece4c75aa9915e489a88deab65b58ae19a31b 100644
--- a/src/app/components/fragments/footer/footer.component.ts
+++ b/src/app/components/fragments/footer/footer.component.ts
@@ -4,6 +4,7 @@ import { NotificationService } from '../../../services/util/notification.service
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material';
 import { FooterLoginDialogComponent } from '../../dialogs/footer-login-dialog/footer-login-dialog.component';
+import { ThemeSwitcherComponent } from '../theme-switcher/theme-switcher.component';
 
 @Component({
   selector: 'app-footer',
@@ -17,7 +18,8 @@ export class FooterComponent implements OnInit {
     public authenticationService: AuthenticationService,
     public notificationService: NotificationService,
     public router: Router,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    public themeSwitcher: ThemeSwitcherComponent
   ) { }
 
   ngOnInit() {
diff --git a/src/app/components/fragments/theme-switcher/theme-switcher.component.html b/src/app/components/fragments/theme-switcher/theme-switcher.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..883c0e35e3b0efc4cc119d3da19f08d06f4f5bec
--- /dev/null
+++ b/src/app/components/fragments/theme-switcher/theme-switcher.component.html
@@ -0,0 +1,11 @@
+<mat-nav-list role="list">
+  <mat-list-item role="listitem">
+    <button mat-button color="primary" (click)="onSetTheme('default-theme')">Default</button>
+  </mat-list-item>
+  <mat-list-item role="listitem">
+    <button mat-button color="primary" (click)="onSetTheme('dark-theme')">Dark</button>
+  </mat-list-item>
+  <mat-list-item role="listitem">
+    <button mat-button color="primary" (click)="onSetTheme('light-theme')">Light</button>
+  </mat-list-item>
+</mat-nav-list>
diff --git a/src/app/components/fragments/theme-switcher/theme-switcher.component.scss b/src/app/components/fragments/theme-switcher/theme-switcher.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/fragments/theme-switcher/theme-switcher.component.spec.ts b/src/app/components/fragments/theme-switcher/theme-switcher.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4fdae9d32949959dd41572a42d22c259b1b94e1c
--- /dev/null
+++ b/src/app/components/fragments/theme-switcher/theme-switcher.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThemeSwitcherComponent } from './theme-switcher.component';
+
+describe('ThemeSwitcherComponent', () => {
+  let component: ThemeSwitcherComponent;
+  let fixture: ComponentFixture<ThemeSwitcherComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ThemeSwitcherComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThemeSwitcherComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/fragments/theme-switcher/theme-switcher.component.ts b/src/app/components/fragments/theme-switcher/theme-switcher.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0f9935427689c32f394bf8ac22cb25a0ddd7cc3f
--- /dev/null
+++ b/src/app/components/fragments/theme-switcher/theme-switcher.component.ts
@@ -0,0 +1,34 @@
+import { Component, HostBinding, OnInit, Version } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { OverlayContainer } from '@angular/cdk/overlay';
+
+@Component({
+  selector: 'app-theme-switcher',
+  templateUrl: './theme-switcher.component.html',
+  styleUrls: ['./theme-switcher.component.scss']
+})
+export class ThemeSwitcherComponent implements OnInit {
+
+  constructor(private http: HttpClient, public overlayContainer: OverlayContainer) {}
+
+  title = 'app';
+  version: Version;
+  @HostBinding('class') componentCssClass;
+
+  ngOnInit() {
+    this.getVersion();
+  }
+
+  onSetTheme(theme) {
+    this.overlayContainer.getContainerElement().classList.add(theme);
+    this.componentCssClass = theme;
+  }
+
+  getVersion() {
+    this.http.get<Version>('/api/version')
+      .subscribe(data => {
+        this.version = data;
+      });
+  }
+
+}
diff --git a/src/theme/_variables.scss b/src/theme/_variables.scss
index e77658e9541224b887d48d1e3ed8126665c223d4..b62fef3fd79a34bd0c1e10192c8323d7ac0e2af0 100644
--- a/src/theme/_variables.scss
+++ b/src/theme/_variables.scss
@@ -1,4 +1,5 @@
 @import '~@angular/material/theming';
+@include mat-core();
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://www.google.com/design/spec/style/color.html
@@ -10,3 +11,30 @@ $arsnova-warn: mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
 $arsnova-theme: mat-light-theme($arsnova-primary, $arsnova-accent, $arsnova-warn);
+
+// Default colors
+
+$my-app-theme: mat-light-theme($arsnova-primary, $arsnova-accent, $arsnova-warn);
+@include angular-material-theme($my-app-theme);
+
+// Dark theme
+$dark-primary: mat-palette($mat-blue-grey);
+$dark-accent:  mat-palette($mat-amber, 200, 100, 400);
+$dark-warn:    mat-palette($mat-deep-orange);
+
+$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+.dark-theme {
+  @include angular-material-theme($dark-theme);
+}
+
+// Light theme
+$light-primary: mat-palette($mat-cyan, 200, 500, 300);
+$light-accent: mat-palette($mat-brown, 200);
+$light-warn: mat-palette($mat-deep-orange, 200);
+
+$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
+
+.light-theme {
+  @include angular-material-theme($light-theme)
+}