theme switcher (#179)

Client/.browserslistrc

@@ -9,4 +9,5 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.
+not safari 15.2-15.3

Client/angular.json

@@ -68,8 +68,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "100kb",
-                  "maximumError": "150kb"
+                  "maximumWarning": "150kb",
+                  "maximumError": "200kb"
                 }
               ]
             }

Client/package.json

@@ -11,16 +11,16 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "~13.1.2",
-    "@angular/cdk": "~13.1.2",
-    "@angular/common": "~13.1.2",
-    "@angular/compiler": "~13.1.2",
-    "@angular/core": "~13.1.2",
-    "@angular/forms": "~13.1.2",
-    "@angular/material": "~13.1.2",
-    "@angular/platform-browser": "~13.1.2",
-    "@angular/platform-browser-dynamic": "~13.1.2",
-    "@angular/router": "~13.1.2",
+    "@angular/animations": "~13.2.0",
+    "@angular/cdk": "~13.2.0",
+    "@angular/common": "~13.2.0",
+    "@angular/compiler": "~13.2.0",
+    "@angular/core": "~13.2.0",
+    "@angular/forms": "~13.2.0",
+    "@angular/material": "~13.2.0",
+    "@angular/platform-browser": "~13.2.0",
+    "@angular/platform-browser-dynamic": "~13.2.0",
+    "@angular/router": "~13.2.0",
     "@ctrl/tinycolor": "^3.4.0",
     "@fortawesome/angular-fontawesome": "^0.10.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -29,31 +29,31 @@
     "chart.js": "^3.7.0",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-chart-financial": "^0.1.1",
-    "chartjs-plugin-annotation": "^1.2.1",
+    "chartjs-plugin-annotation": "^1.3.0",
     "chartjs-plugin-crosshair": "^1.2.0",
     "chartjs-plugin-datalabels": "^2.0.0",
     "date-fns": "^2.28.0",
     "guid-typescript": "^1.0.9",
     "ngx-color": "^7.3.3",
-    "rxjs": "^7.4.0",
+    "rxjs": "^7.5.1",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.1.3",
+    "@angular-devkit/build-angular": "~13.2.0",
     "@angular-eslint/builder": "~13.0.1",
     "@angular-eslint/eslint-plugin": "~13.0.1",
     "@angular-eslint/eslint-plugin-template": "~13.0.1",
     "@angular-eslint/schematics": "~13.0.1",
     "@angular-eslint/template-parser": "~13.0.1",
-    "@angular/cli": "~13.1.3",
-    "@angular/compiler-cli": "~13.1.2",
-    "@angular/language-service": "~13.1.2",
-    "@types/node": "^17.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.9.0",
-    "eslint": "^8.4.1",
+    "@angular/cli": "~13.2.0",
+    "@angular/compiler-cli": "~13.2.0",
+    "@angular/language-service": "~13.2.0",
+    "@types/node": "^17.0.13",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
+    "eslint": "^8.8.0",
     "ts-node": "~10.4.0",
-    "typescript": "~4.5.4"
+    "typescript": "~4.5.5"
   }
-}
+}

Client/src/app/app.component.html

@@ -1,21 +1,23 @@
-<mat-toolbar class="toolbar noselect" color="accent">
-  <h1 matTooltip="Visit the documentation site for Stock Indicators for .NET">
-    <a href="https://daveskender.github.io/Stock.Indicators/">
-      Stock.Charts
+<div [ngClass]="ts.isDarkTheme ? 'dark-theme' : 'light-theme'">
+  <mat-toolbar class="toolbar noselect">
+    <h1 matTooltip="Visit the documentation site for Stock Indicators for .NET">
+      <a href="https://daveskender.github.io/Stock.Indicators/">
+        Stock.Charts
+      </a>
+    </h1>
+    <div class="filler"></div>
+    <a class="badge" href="https://www.nuget.org/packages/Skender.Stock.Indicators"
+      matTooltip="NuGet package for Stock Indicators for .NET">
+      <img src="https://img.shields.io/nuget/v/skender.stock.indicators?color=black&logo=NuGet&label=NuGet" />
     </a>
-  </h1>
-  <div class="filler"></div>
-  <a class="badge" href="https://www.nuget.org/packages/Skender.Stock.Indicators"
-    matTooltip="NuGet package for Stock Indicators for .NET">
-    <img src="https://img.shields.io/nuget/v/skender.stock.indicators?color=black&logo=NuGet&label=NuGet" />
-  </a>
-  <div matTooltip="GitHub repository for this demo">
-    <a href="https://github.com/DaveSkender/Stock.Charts">
-      <fa-icon [icon]="faGithub" size="2x"></fa-icon>
-    </a>
-  </div>
-</mat-toolbar>
+    <div matTooltip="GitHub repository for this demo">
+      <a href="https://github.com/DaveSkender/Stock.Charts">
+        <fa-icon [icon]="faGithub" size="2x"></fa-icon>
+      </a>
+    </div>
+  </mat-toolbar>
 
-<div id="main-content" class="body-container">
-  <app-chart></app-chart>
+  <div id="main-content" class="body-container">
+    <app-chart></app-chart>
+  </div>
 </div>

Client/src/app/app.component.scss

@@ -4,7 +4,6 @@
 mat-toolbar {
   font-family: Google Sans, Roboto, Arial, Helvetica, sans-serif;
   color: $color-primary-700 !important;
-  background-color: $color-primary !important;
   padding: 0 16px 0 8px;
 
   a {

Client/src/app/app.component.ts

@@ -1,12 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { StyleService } from './style.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
   faGithub = faGithub;
+
+  constructor(
+    public readonly ts: StyleService,
+  ) { }
+
+  ngOnInit(): void {
+    this.ts.getTheme();
+  }
 }

Client/src/app/app.module.ts

@@ -2,15 +2,18 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { AppComponent } from './app.component';
+import { StyleService } from './style.service';
 import { ChartModule } from './chart/chart.module';
 
 @NgModule({
@@ -24,10 +27,12 @@ import { ChartModule } from './chart/chart.module';
     BrowserAnimationsModule,
 
     CommonModule,
+    FormsModule,
 
     // Materials Design
     MatButtonModule,
     MatIconModule,
+    MatSlideToggleModule,
     MatToolbarModule,
     MatTooltipModule,
 
@@ -37,7 +42,9 @@ import { ChartModule } from './chart/chart.module';
     // Application
     ChartModule
   ],
-  providers: [],
+  providers: [
+    StyleService
+  ],
   bootstrap: [
     AppComponent
   ]

Client/src/app/chart/chart.component.html

@@ -16,8 +16,8 @@
 </div>
 
 <!-- ADD INDICATOR -->
-<button mat-fab color="accent" class="button-listing" (click)="openPickList()" matTooltip="add a new indicator">
-  <mat-icon>add</mat-icon>/<mat-icon>remove</mat-icon>
+<button mat-mini-fab color="accent" class="button-listing" (click)="openPickList()" matTooltip="add a new indicator">
+  <mat-icon>settings</mat-icon>
 </button>
 
 <!-- CHART (OSCILLATORS) -->

Client/src/app/chart/chart.component.scss

@@ -5,8 +5,12 @@
   margin: 0;
   border-style: none;
   border-width: 0;
-  min-height: 70vh;
+  min-height: 55vh;
   max-height: calc(100vh - 64px);
+
+  @media (max-height: 400px){
+    height: calc(100vh - 64px); // full-screen (with toolbar)
+  }
 }
 
 .chart-oscillator-container {
@@ -30,3 +34,7 @@
     background-color: $color-accent-800 !important;
   }
 }
+
+.toggle {
+  margin-left: 16px;
+}