Add theme-switcher component

Add Buttons for default/dark/light Theme
Add preliminary dark and light themes
Todo: only the button color itself changes, not the whole theme

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]
 })

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>

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() {

src/app/components/fragments/theme-switcher/theme-switcher.component.html

+<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>

src/app/components/fragments/theme-switcher/theme-switcher.component.spec.ts

+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();
+  });
+});

src/app/components/fragments/theme-switcher/theme-switcher.component.ts

+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;
+      });
+  }
+
+}

src/theme/_variables.scss

 @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)
+}