Add theme switch functionality

src/app/app.component.html

-<div fxLayout="column" fxFill>
-  <app-header></app-header>
-  <div fxFlex class="app-component">
-    <router-outlet></router-outlet>
+  <div [ngClass]="header.themeClass" fxLayout="column" fxFill appTheme>
+    <app-header #header></app-header>
+    <div fxFlex class="app-component">
+      <router-outlet></router-outlet>
+    </div>
+    <app-footer></app-footer>
   </div>
-  <app-footer></app-footer>
-</div>

src/app/app.component.scss

@@ -2,7 +2,7 @@
 
 .app-component {
   padding: 4%;
-  background-color: #b2dfdb;
+  background-color:var(--background-color);
 }
 
 

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { ThemeService } from '../theme/theme.service';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +9,8 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class AppComponent {
 
-  constructor(private translationService: TranslateService) {
+  constructor(private translationService: TranslateService,
+              private themeService: ThemeService) {
 
     translationService.setDefaultLang(this.translationService.getBrowserLang());
     sessionStorage.setItem('currentLang', this.translationService.getBrowserLang());

src/app/app.module.ts

@@ -26,6 +26,7 @@ import { MarkdownService, MarkedOptions } from 'ngx-markdown';
 import { NewLandingComponent } from './components/home/new-landing/new-landing.component';
 import { HomePageComponent } from './components/home/home-page/home-page.component';
 import { AppConfig } from './app.config';
+import { ThemeModule } from '../theme/theme.module';
 
 export function dialogClose(dialogResult: any) {
 }
@@ -53,7 +54,8 @@ export function initializeApp(appConfig: AppConfig) {
     BrowserModule,
     BrowserAnimationsModule,
     EssentialsModule,
-    SharedModule
+    SharedModule,
+    ThemeModule
   ],
   providers: [
     AppConfig,

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

@@ -7,6 +7,16 @@
     <span *ngIf="router.url !== '/home'" class="app-title" (click)="goToHomepage()">ARSnova</span>
     <span class="fill-remaining-space"></span>
 
+
+    <mat-menu #themeMenu="matMenu" [overlapTrigger]="false">
+      <button mat-menu-item (click)="changeTheme('')">{{ 'default' | translate }}</button>
+      <button mat-menu-item (click)="changeTheme('dark')">{{ 'dark' | translate }}</button>
+    </mat-menu>
+
+    <button mat-icon-button [matMenuTriggerFor]="themeMenu">
+      <mat-icon>palette</mat-icon>
+    </button>
+
     <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
       <button mat-menu-item (click)="useLanguage('de')">{{ 'header.german' | translate }}</button>
       <button mat-menu-item (click)="useLanguage('en')">{{ 'header.english' | translate }}</button>

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

@@ -9,6 +9,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../services/util/language.service';
 import { MatDialog } from '@angular/material';
 import { LoginComponent } from '../login/login.component';
+import { ThemeService } from '../../../../theme/theme.service';
 
 @Component({
   selector: 'app-header',
@@ -17,6 +18,7 @@ import { LoginComponent } from '../login/login.component';
 })
 export class HeaderComponent implements OnInit {
   user: User;
+  themeClass = localStorage.getItem('classNameOfTheme');
 
   constructor(public location: Location,
               private authenticationService: AuthenticationService,
@@ -24,7 +26,9 @@ export class HeaderComponent implements OnInit {
               public router: Router,
               private translationService: TranslateService,
               private langService: LanguageService,
-              public dialog: MatDialog) {
+              public dialog: MatDialog,
+              private themeService: ThemeService
+  ) {
   }
 
   ngOnInit() {
@@ -61,6 +65,16 @@ export class HeaderComponent implements OnInit {
     this.langService.langEmitter.emit(language);
   }
 
+  changeTheme(theme) {
+    this.themeClass = theme;
+    localStorage.setItem('classNameOfTheme', theme);
+    if (theme === '') {
+      this.themeService.setActiveThem('arsnovaTheme');
+    } else {
+      this.themeService.setActiveThem(theme);
+    }
+  }
+
   login(isDozent: boolean) {
     const dialogRef = this.dialog.open(LoginComponent, {
       width: '350px'

src/styles.scss

 @import 'theme/_variables.scss';
+@import "theme/_dark-theme.scss";
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
@@ -11,4 +12,10 @@
 // that you are using.
 @include angular-material-theme($arsnova-theme);
 
+
+.dark {
+  @include angular-material-theme($dark-theme);
+}
+
+
 @import 'theme/_theme.scss';

src/theme/_dark-theme.scss

+@import '~@angular/material/theming';
+
+html, body {
+  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.fill-remaining-space {
+  /* This fills the remaining space, by using flexbox.
+     Every toolbar row uses a flexbox row layout. */
+  flex: 1 1 auto;
+}
+
+mat-form-field.input-block {
+  display: block;
+}
+
+.mat-fab .mat-button-wrapper {
+  padding: 0!important;
+}
+
+.mat-dialog-container {
+  background-color: #e0f2f1;
+}
+
+.mat-tab-header {
+  border-bottom-style: none!important;
+}
+
+
+$dark-primary: mat-palette($mat-gray);
+$dark-accent: mat-palette($mat-blue-gray);
+$dark-warn: mat-palette($mat-red);
+
+$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+

src/theme/_theme.scss

@@ -11,10 +11,3 @@ html, body {
 @import '_util.scss';
 @import '_form.scss';
 
-.progress-theme {
-  $progress-primary: mat-palette($mat-light-green, 300);
-  $progress-accent: mat-palette($mat-amber, 300);
-  $progress-warn:  mat-palette($mat-deep-orange, 300);
-  $progress-theme: mat-light-theme($progress-primary, $progress-accent, $progress-warn);
-  @include angular-material-theme($progress-theme);
-}

src/theme/_variables.scss

@@ -10,3 +10,4 @@ $arsnova-warn: mat-palette($mat-red, A100);
 
 // Create the theme object (a Sass map containing all of the palettes).
 $arsnova-theme: mat-light-theme($arsnova-primary, $arsnova-accent, $arsnova-warn);
+

src/theme/arsnova-theme.const.ts

+export const themes = {
+  arsnovaTheme: {
+    '--button-color': '#80cbc4',
+    '--background-color': '#b2dfdb',
+    '--black-color' : '#000000'
+  },
+  dark: {
+    '--button-color': '#80cbc4',
+    '--background-color': '#000000',
+    '--black-color' : '#000000'
+  }
+};

src/theme/theme.directive.ts

+import { Directive, ElementRef, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { themes } from './arsnova-theme.const';
+import { ThemeService } from './theme.service';
+import { Subscription } from 'rxjs';
+
+@Directive({
+  selector: '[appTheme]'
+})
+
+export class ThemeDirective implements OnInit, OnDestroy {
+
+  private themeName = 'arsnovaTheme';
+  private themServiceSubscription: Subscription;
+
+  constructor(private elementRef: ElementRef,
+              private renderer: Renderer2,
+              @Inject(DOCUMENT) private document: any,
+              private themService: ThemeService) {
+  }
+
+  ngOnInit() {
+    this.updateTheme(this.themeName);
+    this.themService.getActiveTheme()
+      .subscribe(themeName => {
+        this.themeName = themeName;
+        this.updateTheme(this.themeName);
+      });
+  }
+
+  updateTheme(themeName: string) {
+    const them = themes[ themeName ];
+    for (const key in them) {
+      if (them.hasOwnProperty(key)) {
+        this.renderer.setProperty(this.elementRef.nativeElement, key, them[key]);
+        this.document.body.style.setProperty(key, them[key]);
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.themServiceSubscription) {
+      this.themServiceSubscription.unsubscribe();
+    }
+  }
+}

src/theme/theme.module.ts

+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ThemeDirective } from './theme.directive';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  declarations: [ThemeDirective],
+  exports:      [ThemeDirective],
+})
+export class ThemeModule { }

src/theme/theme.service.ts

+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  themeName = localStorage.getItem('classNameOfTheme');
+  private activeThem = new BehaviorSubject(this.themeName);
+
+  constructor() { }
+
+  public getActiveTheme() {
+    return this.activeThem.asObservable();
+  }
+
+  public setActiveThem(name) {
+    this.activeThem.next(name);
+  }
+}