Started on the dark theme

src/Ombi/ClientApp/src/app/app.component.ts

@@ -1,5 +1,6 @@
-import { PlatformLocation } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { OverlayContainer } from '@angular/cdk/overlay';
+
+import { Component, OnInit, HostBinding } from "@angular/core";
 import { NavigationStart, Router } from "@angular/router";
 import { TranslateService } from "@ngx-translate/core";
 import { AuthService } from "./auth/auth.service";
@@ -28,6 +29,9 @@ export class AppComponent implements OnInit {
 
     private checkedForUpdate: boolean;
 
+
+    @HostBinding('class') public componentCssClass;
+
     constructor(public notificationService: NotificationService,
         public authService: AuthService,
         private readonly router: Router,
@@ -35,7 +39,8 @@ export class AppComponent implements OnInit {
         private readonly jobService: JobService,
         public readonly translate: TranslateService,
         private readonly identityService: IdentityService,
-        private readonly customPageService: CustomPageService) {
+        private readonly customPageService: CustomPageService,
+        public overlayContainer: OverlayContainer) {
 
         // const base = this.platformLocation.getBaseHrefFromDOM();
         // if (base.length > 1) {
@@ -52,6 +57,8 @@ export class AppComponent implements OnInit {
     }
 
     public ngOnInit() {
+        const theme = localStorage.getItem("theme");
+        this.onSetTheme(theme);
         this.user = this.authService.claims();
 
         this.settingsService.getCustomization().subscribe(x => {
@@ -117,4 +124,11 @@ export class AppComponent implements OnInit {
         this.authService.logout();
         this.router.navigate(["login"]);
     }
+
+    public onSetTheme(theme: string) {
+        if (theme) {
+            this.overlayContainer.getContainerElement().classList.add(theme);
+            this.componentCssClass = theme;
+        }
+    }
 }

src/Ombi/ClientApp/src/app/app.module.ts

@@ -50,6 +50,7 @@ import { MyNavComponent } from './my-nav/my-nav.component';
 import { LayoutModule } from '@angular/cdk/layout';
 import { SearchV2Service } from "./services/searchV2.service";
 import { NavSearchComponent } from "./my-nav/nav-search.component";
+import { OverlayModule } from "@angular/cdk/overlay";
 
 const routes: Routes = [
     { path: "*", component: PageNotFoundComponent },
@@ -122,6 +123,7 @@ export function JwtTokenGetter() {
         OverlayPanelModule,
         CommonModule,
         CardsFreeModule,
+        OverlayModule,
         MatCheckboxModule,
         MDBBootstrapModule.forRoot(),
         JwtModule.forRoot({

src/Ombi/ClientApp/src/app/media-details/media-details.component.scss

@@ -1,4 +1,5 @@
-$ombi-primary:#3f3f3f;
+@import "~@angular/material/theming";
+@import "../../styles/Styles.scss";
 //MINE
 @media (max-width: 570px) {
     h1 {
@@ -108,9 +109,6 @@ $ombi-primary:#3f3f3f;
     min-height: 600px;
 }
 
-section {
-    background-color: #fff;
-}
 
 #info-wrapper .sidebar.affixable.affix-top {
     position: relative !important;
@@ -180,7 +178,7 @@ section {
 }
 
 .media-icons {
-    color:$ombi-primary;
+    color: mat-color($ombi-app-primary) !important;
     padding: 1%;
 }
 
@@ -202,3 +200,6 @@ section {
     margin-top: 8%;
 }
 
+.card-color {
+    background: $panel-color;
+}

src/Ombi/ClientApp/src/app/media-details/movie/movie-details.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="movie">
+<div *ngIf="movie" class="dark-theme">
 
 
     <section id="summary-wrapper">
@@ -106,7 +106,7 @@
                     <button *ngIf="movie.belongsToCollection" mat-raised-button
                         class="btn-spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button>
 
-                    <mat-card class="card-full mat-elevation-z8">
+                    <mat-card class="card-full card-color mat-elevation-z8">
                         <mat-card-content>
                             <div>
                                 <span><strong>Theatrical Release:</strong>

src/Ombi/ClientApp/src/styles/Styles.scss

@@ -12,6 +12,7 @@
 // hue. Available color palettes: https://material.io/design/color/
 $ombi-app-primary: mat-palette($ombi-primary, 500);
 $ombi-app-accent:  mat-palette($ombi-accent, A200, A100, A400);
+$panel-color: white;
 
 // The warn palette is optional (defaults to red).
 $ombi-app-warn:    mat-palette($mat-deep-orange);
@@ -22,4 +23,20 @@ $ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($ombi-app-theme);
+@include angular-material-theme($ombi-app-theme);
+
+
+
+// Define an alternate dark theme.
+$ombi-app-primary: mat-palette($mat-grey, 800);
+$ombi-app-accent:  mat-palette($mat-amber, A200, A100, A400);
+$ombi-app-warn:    mat-palette($mat-deep-orange);
+$dark-theme:   mat-dark-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn);
+
+// Include the alternative theme styles inside of a block with a CSS class. You can make this
+// CSS class whatever you want. In this example, any component inside of an element with
+// `.dark-theme` will be affected by this alternate dark theme instead of the default theme.
+.dark {
+    @include angular-material-theme($dark-theme);
+    $panel-color: mat-color(mat-palette($mat-grey, 800));
+}