Err, this is a good one. Really happy with this. But please don't tell anyone

src/Ombi/ClientApp/angular.json

@@ -25,8 +25,10 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles/_imports.scss",
               "node_modules/bootstrap/scss/bootstrap.scss",
+              "node_modules/primeng/resources/themes/md-dark-deeppurple/theme.css",
               "node_modules/font-awesome/scss/font-awesome.scss",
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeicons/primeicons.css",

src/Ombi/ClientApp/package.json

@@ -54,6 +54,7 @@
     "primeicons": "^4.0.0",
     "primeng": "^11.0.0",
     "rxjs": "^6.5.2",
+    "sass-recursive-map-merge": "^1.0.1",
     "spinkit": "^1.2.5",
     "store": "^2.0.12",
     "ts-md5": "^1.2.7",

src/Ombi/ClientApp/src/app/app.component.html

@@ -170,7 +170,7 @@
 
 
 <div>
-    <app-my-nav id="main-container dark" [showNav]="showNav" [isAdmin]="isAdmin" [applicationName]="applicationName" [applicationLogo]="customizationSettings?.logo" [username]="username" [email]="user?.email " (logoutClick)="logOut();" (themeChange)="onSetTheme($event)">
+    <app-my-nav id="main-container dark" [showNav]="showNav" [isAdmin]="isAdmin" [applicationName]="applicationName" [applicationLogo]="customizationSettings?.logo" [username]="username" [email]="user?.email " (logoutClick)="logOut();">
     </app-my-nav>
 
 

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

@@ -85,8 +85,6 @@ export class AppComponent implements OnInit {
 
     public ngOnInit() {
         window["loading_screen"].finish();
-        const theme = this.storage.get("theme");
-        this.onSetTheme(theme);
 
         this.settingsService.getCustomization().subscribe(x => {
             this.customizationSettings = x;
@@ -131,11 +129,4 @@ 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/my-nav/my-nav.component.html

@@ -42,11 +42,6 @@
                 </div>
             </span>
 
-            <a id="nav-theme" mat-list-item (click)="switchTheme()">
-                <mat-icon *ngIf="theme === 'dark'" aria-label="Side nav toggle icon">wb_incandescent</mat-icon>
-                <mat-icon *ngIf="theme === 'light'" aria-label="Side nav toggle icon">brightness_4</mat-icon>
-                &nbsp;{{ 'NavigationBar.ChangeTheme' | translate }}
-            </a>
             <a id="nav-logout" mat-list-item [routerLinkActive]="'active-list-item'"
                 aria-label="Toggle sidenav" (click)="logOut();">
                 <mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss

@@ -114,7 +114,7 @@
 // New CSS for new style //
 
 .sidenav-container .sidenav{
-    background: #1b242f;
+    background: $ombi-background-accent;
     color:#FFF;
     width: 23rem;
     font-family: 'Montserrat', sans-serif;
@@ -167,7 +167,7 @@
 
     .top-bar-container{
         background: $ombi-background-primary;
-        color:$ombi-background-primary-accent; 
+        color:$ombi-background-primary-accent;
     }
 
 }

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts

@@ -37,7 +37,6 @@ export class MyNavComponent implements OnInit {
   @Input() public isAdmin: string;
   @Input() public email: string;
   @Output() public logoutClick = new EventEmitter();
-  @Output() public themeChange = new EventEmitter<string>();
   public theme: string;
   public issuesEnabled: boolean = false;
   public navItems: INavBar[];
@@ -98,20 +97,6 @@ export class MyNavComponent implements OnInit {
     this.logoutClick.emit();
   }
 
-  public switchTheme() {
-    if (this.theme) {
-      let newTheme = "";
-      if (this.theme === "dark") {
-        newTheme = "light";
-      } else {
-        newTheme = "dark";
-      }
-      this.store.save("theme", newTheme)
-      this.theme = newTheme;
-      this.themeChange.emit(newTheme);
-    }
-  }
-
   public changeFilter(event: MatSlideToggleChange, searchFilterType: SearchFilterType) {
     switch (searchFilterType) {
       case SearchFilterType.Movie:

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.scss

@@ -4,7 +4,7 @@
 	background: $accent-dark !important;
 	font-size: 1em;
 	font-weight: bold;
-	color: #303030;
+	color: $ombi-background-primary-accent;
 }
 
 .mat-form-field {
@@ -23,7 +23,7 @@
 
 ::ng-deep .dark .mat-tab-label-active{
 	background: $accent-dark !important;
-	color: #303030 !important;
+	color: $ombi-background-primary-accent !important;
 	font-weight:bold;
 }
 

src/Ombi/ClientApp/src/index.html

@@ -57,7 +57,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
 </head>
 
-<body class="mat-typography custom-background">
+<body class="mat-typography my-theme">
 
     <app-ombi>
         <script type="text/javascript">

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

@@ -10,15 +10,14 @@
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 // Create the theme object (a Sass map containing all of the palettes).
-$ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn);
-@include angular-material-theme($ombi-app-theme);
-
-$dark-theme: mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn);
 
 
-// Include the alternative theme styles inside of a block with a CSS class. You can make this
+    $mat-light-theme-background: map_merge($mat-light-theme-background, (background: $ombi-background-primary));
-// CSS class whatever you want. In this example, any component inside of an element with
+
-// `.dark` will be affected by this alternate dark theme instead of the default theme.
+    $theme: mat-dark-theme((
-.dark {
+        color: (
-    @include angular-material-theme($dark-theme);
+            primary: $ombi-dark-app-primary,
-}
+            accent: $ombi-dark-app-accent,
+        )
+    ), $ombi-dark-app-accent);
+    @include angular-material-theme($theme);

src/Ombi/ClientApp/src/styles/material-overrides.scss

@@ -1,3 +1,5 @@
+@import "./variables.scss";
+
 .lg-form-field .mat-form-field-infix {
     width: 480px;
 }
@@ -12,4 +14,19 @@ td.mat-cell {
 
 .mat-form-field {
     display: block !important;
+}
+
+
+.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
+    background-color:  $ombi-background-accent;
+}
+
+// lighter bg
+.mat-expansion-panel, .mat-card, .mat-dialog-container, .mat-menu-content{
+    background: $ombi-background-accent !important;
+}
+
+// Dark bg
+.mat-sidenav-container {
+    background: $ombi-background-primary;
 }

src/Ombi/ClientApp/src/styles/variables.scss

@@ -8,12 +8,12 @@
 $ombi-app-primary: mat-palette($ombi-primary);
 $ombi-app-accent : mat-palette($ombi-accent);
 // The warn palette is optional (defaults to red).
-$ombi-app-warn : mat-palette($mat-deep-orange);
+$ombi-app-warn : mat-palette($ombi-accent);
 
 // Define an alternate dark theme.
-$ombi-dark-app-primary: mat-palette($ombi-primary);
+$ombi-dark-app-primary: mat-palette($ombi-primary, 500);
-$ombi-dark-app-accent:  mat-palette($ombi-accent);
+$ombi-dark-app-accent:  mat-palette($ombi-accent, 500);
-$ombi-dark-app-warn: mat-palette($mat-deep-orange);
+$ombi-dark-app-warn: mat-palette($ombi-accent, 500);
 
 
 
@@ -32,7 +32,7 @@ $warn: mat-color($ombi-app-warn);
 // DARK
 
 $background-dark: mat-color( mat-palette($ombi-background));
-$backgroundTint-dark:  mat-color(mat-palette($mat-grey, 900));
+$backgroundTint-dark:  mat-color(mat-palette($ombi-background, 900));
 $text-dark: white;
 $panel: mat-color($ombi-dark-app-primary);
 $primary-dark: mat-color($ombi-dark-app-primary);

src/Ombi/ClientApp/yarn.lock

@@ -7720,6 +7720,11 @@ sass-loader@8.0.2:
     schema-utils "^2.6.1"
     semver "^6.3.0"
 
+sass-recursive-map-merge@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sass-recursive-map-merge/-/sass-recursive-map-merge-1.0.1.tgz#d5460b9fe10df62d246ca27c48d823f25c2290cb"
+  integrity sha512-OuDTGVGx2o2sPeaSgGob5s2Qf6LxoMU4LG7n6vCzNgfXyBz/y8tKzcEYdmvgyhjvGQVcGA1g2UJnP7WMmahuVg==
+
 sass@1.26.3:
   version "1.26.3"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.3.tgz#412df54486143b76b5a65cdf7569e86f44659f46"