Eliminate angular-material-css-vars

apps/client/project.json

@@ -65,7 +65,10 @@
             "output": "./../assets/"
           }
         ],
-        "styles": ["apps/client/src/styles.scss"],
+        "styles": [
+          "apps/client/src/styles/theme.scss",
+          "apps/client/src/styles.scss"
+        ],
         "scripts": ["node_modules/marked/marked.min.js"],
         "vendorChunk": true,
         "extractLicenses": false,

apps/client/src/app/app.component.ts

@@ -1,26 +1,17 @@
+import { DOCUMENT } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  Inject,
   OnDestroy,
   OnInit
 } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import {
+import { NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router';
-  ActivatedRoute,
-  NavigationEnd,
-  PRIMARY_OUTLET,
-  Router
-} from '@angular/router';
-import {
-  primaryColorHex,
-  secondaryColorHex,
-  warnColorHex
-} from '@ghostfolio/common/config';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { ColorScheme } from '@ghostfolio/common/types';
-import { MaterialCssVarsService } from 'angular-material-css-vars';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
@@ -52,7 +43,7 @@ export class AppComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
-    private materialCssVarsService: MaterialCssVarsService,
+    @Inject(DOCUMENT) private document: Document,
     private router: Router,
     private title: Title,
     private tokenStorageService: TokenStorageService,
@@ -126,16 +117,20 @@ export class AppComponent implements OnDestroy, OnInit {
       ? userPreferredColorScheme === 'DARK'
       : window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-    this.materialCssVarsService.setDarkTheme(isDarkTheme);
+    this.toggleThemeStyleClass(isDarkTheme);
 
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       if (!this.user?.settings.colorScheme) {
-        this.materialCssVarsService.setDarkTheme(event.matches);
+        this.toggleThemeStyleClass(event.matches);
       }
     });
+  }
 
-    this.materialCssVarsService.setPrimaryColor(primaryColorHex);
+  private toggleThemeStyleClass(isDarkTheme: boolean) {
-    this.materialCssVarsService.setAccentColor(secondaryColorHex);
+    if (isDarkTheme) {
-    this.materialCssVarsService.setWarnColor(warnColorHex);
+      this.document.body.classList.add('is-dark-theme');
+    } else {
+      this.document.body.classList.remove('is-dark-theme');
+    }
   }
 }

apps/client/src/app/app.module.ts

@@ -14,7 +14,6 @@ import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/le
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
-import { MaterialCssVarsModule } from 'angular-material-css-vars';
 import { MarkdownModule } from 'ngx-markdown';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';
@@ -46,11 +45,6 @@ export function NgxStripeFactory(): string {
     MarkdownModule.forRoot(),
     MatAutocompleteModule,
     MatChipsModule,
-    MaterialCssVarsModule.forRoot({
-      darkThemeClass: 'is-dark-theme',
-      isAutoContrast: true,
-      lightThemeClass: 'is-light-theme'
-    }),
     MatNativeDateModule,
     MatSnackBarModule,
     MatTooltipModule,

apps/client/src/styles.scss

@@ -1,23 +1,190 @@
-@use 'angular-material-css-vars/main' as mat-css;
-
 @import './styles/bootstrap';
 @import './styles/table';
 
 @import 'node_modules/svgmap/dist/svgMap';
 
-$mat-css-dark-theme-selector: '.is-dark-theme';
-$mat-css-light-theme-selector: '.is-light-theme';
-
-@include mat-css.init-material-css-vars() using($mat-css-theme) {
-  // If your app has any theme mixins, call them here.
-  // $mat-css-theme gets set to an appropriate value before this content is called.
-  // @include your-custom-component-theme($mat-css-theme);
-}
-
 :root {
   --dark-background: rgb(25, 25, 25);
   --font-family-sans-serif: Roboto, 'Helvetica Neue', sans-serif;
   --light-background: rgb(255, 255, 255);
+
+  --dark-primary-text: 0, 0, 0, 0.87;
+  --dark-secondary-text: 0, 0, 0, 0.54;
+  --dark-accent-text: 0, 0, 0, 0.87;
+  --dark-warn-text: 0, 0, 0, 0.87;
+  --dark-disabled-text: 0, 0, 0, 0.38;
+  --dark-dividers: 0, 0, 0, 0.12;
+  --dark-focused: 0, 0, 0, 0.12;
+  --light-primary-text: 255, 255, 255, 1;
+  --light-secondary-text: 255, 255, 255, 0.7;
+  --light-accent-text: 255, 255, 255, 1;
+  --light-warn-text: 255, 255, 255, 1;
+  --light-disabled-text: 255, 255, 255, 0.5;
+  --light-dividers: 255, 255, 255, 0.12;
+  --light-focused: 255, 255, 255, 0.12;
+  --palette-background-status-bar: 224, 224, 224;
+  --palette-background-app-bar: 245, 245, 245;
+  --palette-background-background: 250, 250, 250;
+  --palette-background-hover: 0, 0, 0;
+  --palette-background-hover-alpha: 0.04;
+  --palette-background-card: 255, 255, 255;
+  --palette-background-dialog: 255, 255, 255;
+  --palette-background-disabled-button: 0, 0, 0;
+  --palette-background-disabled-button-alpha: 0.12;
+  --palette-background-raised-button: 255, 255, 255;
+  --palette-background-focused-button: 0, 0, 0;
+  --palette-background-focused-button-alpha: 0.12;
+  --palette-background-selected-button: 224, 224, 224;
+  --palette-background-selected-disabled-button: 189, 189, 189;
+  --palette-background-disabled-button-toggle: 238, 238, 238;
+  --palette-background-unselected-chip: 224, 224, 224;
+  --palette-background-disabled-list-option: 238, 238, 238;
+  --palette-background-tooltip: 97, 97, 97;
+  --palette-background-status-bar-dark: 0, 0, 0;
+  --palette-background-app-bar-dark: 33, 33, 33;
+  --palette-background-background-dark: 48, 48, 48;
+  --palette-background-hover-dark: 255, 255, 255;
+  --palette-background-hover-dark-alpha: 0.04;
+  --palette-background-card-dark: 66, 66, 66;
+  --palette-background-dialog-dark: 66, 66, 66;
+  --palette-background-disabled-button-dark: 255, 255, 255;
+  --palette-background-disabled-button-dark-alpha: 0.12;
+  --palette-background-raised-button-dark: 66, 66, 66;
+  --palette-background-focused-button-dark: 255, 255, 255;
+  --palette-background-focused-button-dark-alpha: 0.12;
+  --palette-background-selected-button-dark: 33, 33, 33;
+  --palette-background-selected-disabled-button-dark: 66, 66, 66;
+  --palette-background-disabled-button-toggle-dark: 0, 0, 0;
+  --palette-background-unselected-chip-dark: 97, 97, 97;
+  --palette-background-disabled-list-option-dark: 0, 0, 0;
+  --palette-background-tooltip-dark: 97, 97, 97;
+  --palette-foreground-base: 0, 0, 0;
+  --palette-foreground-divider: 0, 0, 0;
+  --palette-foreground-divider-alpha: 0.12;
+  --palette-foreground-dividers: 0, 0, 0;
+  --palette-foreground-dividers-alpha: 0.12;
+  --palette-foreground-disabled: 0, 0, 0;
+  --palette-foreground-disabled-alpha: 0.38;
+  --palette-foreground-disabled-button: 0, 0, 0;
+  --palette-foreground-disabled-button-alpha: 0.26;
+  --palette-foreground-disabled-text: 0, 0, 0;
+  --palette-foreground-disabled-text-alpha: 0.38;
+  --palette-foreground-hint-text: 0, 0, 0;
+  --palette-foreground-hint-text-alpha: 0.38;
+  --palette-foreground-secondary-text: 0, 0, 0;
+  --palette-foreground-secondary-text-alpha: 0.54;
+  --palette-foreground-icon: 0, 0, 0;
+  --palette-foreground-icon-alpha: 0.54;
+  --palette-foreground-icons: 0, 0, 0;
+  --palette-foreground-icons-alpha: 0.54;
+  --palette-foreground-text: 0, 0, 0;
+  --palette-foreground-text-alpha: 0.87;
+  --palette-foreground-slider-min: 0, 0, 0;
+  --palette-foreground-slider-min-alpha: 0.87;
+  --palette-foreground-slider-off: 0, 0, 0;
+  --palette-foreground-slider-off-alpha: 0.26;
+  --palette-foreground-slider-off-active: 0, 0, 0;
+  --palette-foreground-slider-off-active-alpha: 0.38;
+  --palette-foreground-base-dark: 255, 255, 255;
+  --palette-foreground-divider-dark: 255, 255, 255;
+  --palette-foreground-divider-dark-alpha: 0.12;
+  --palette-foreground-dividers-dark: 255, 255, 255;
+  --palette-foreground-dividers-dark-alpha: 0.12;
+  --palette-foreground-disabled-dark: 255, 255, 255;
+  --palette-foreground-disabled-dark-alpha: 0.5;
+  --palette-foreground-disabled-button-dark: 255, 255, 255;
+  --palette-foreground-disabled-button-dark-alpha: 0.3;
+  --palette-foreground-disabled-text-dark: 255, 255, 255;
+  --palette-foreground-disabled-text-dark-alpha: 0.5;
+  --palette-foreground-hint-text-dark: 255, 255, 255;
+  --palette-foreground-hint-text-dark-alpha: 0.5;
+  --palette-foreground-secondary-text-dark: 255, 255, 255;
+  --palette-foreground-secondary-text-dark-alpha: 0.7;
+  --palette-foreground-icon-dark: 255, 255, 255;
+  --palette-foreground-icon-dark-alpha: 1;
+  --palette-foreground-icons-dark: 255, 255, 255;
+  --palette-foreground-icons-dark-alpha: 1;
+  --palette-foreground-text-dark: 255, 255, 255;
+  --palette-foreground-text-dark-alpha: 1;
+  --palette-foreground-slider-min-dark: 255, 255, 255;
+  --palette-foreground-slider-min-dark-alpha: 1;
+  --palette-foreground-slider-off-dark: 255, 255, 255;
+  --palette-foreground-slider-off-dark-alpha: 0.3;
+  --palette-foreground-slider-off-active-dark: 255, 255, 255;
+  --palette-foreground-slider-off-active-dark-alpha: 0.38;
+
+  --palette-primary-50: 231, 249, 249;
+  --palette-primary-100: 195, 241, 240;
+  --palette-primary-200: 155, 231, 230;
+  --palette-primary-300: 114, 221, 219;
+  --palette-primary-400: 84, 214, 212;
+  --palette-primary-500: 54, 207, 204;
+  --palette-primary-600: 48, 202, 199;
+  --palette-primary-700: 41, 195, 192;
+  --palette-primary-800: 34, 189, 185;
+  --palette-primary-900: 22, 178, 173;
+  --palette-primary-A100: 229, 255, 254;
+  --palette-primary-A200: 178, 255, 253;
+  --palette-primary-A400: 127, 255, 251;
+  --palette-primary-A700: 101, 255, 250;
+  --palette-primary-contrast-50: 0, 0, 0, 0.87;
+  --palette-primary-contrast-100: 0, 0, 0, 0.87;
+  --palette-primary-contrast-200: 0, 0, 0, 0.87;
+  --palette-primary-contrast-300: 0, 0, 0, 0.87;
+  --palette-primary-contrast-400: 0, 0, 0, 0.87;
+  --palette-primary-contrast-500: 0, 0, 0, 0.87;
+  --palette-primary-contrast-600: 0, 0, 0, 0.87;
+  --palette-primary-contrast-700: 0, 0, 0, 0.87;
+  --palette-primary-contrast-800: 0, 0, 0, 0.87;
+  --palette-primary-contrast-900: 0, 0, 0, 0.87;
+  --palette-accent-50: 231, 240, 249;
+  --palette-accent-100: 195, 219, 241;
+  --palette-accent-200: 155, 195, 231;
+  --palette-accent-300: 114, 170, 221;
+  --palette-accent-400: 84, 152, 214;
+  --palette-accent-500: 54, 134, 207;
+  --palette-accent-600: 48, 126, 202;
+  --palette-accent-700: 41, 115, 195;
+  --palette-accent-800: 34, 105, 189;
+  --palette-accent-900: 22, 86, 178;
+  --palette-accent-A100: 229, 239, 255;
+  --palette-accent-A200: 178, 207, 255;
+  --palette-accent-A400: 127, 175, 255;
+  --palette-accent-A700: 101, 159, 255;
+  --palette-accent-contrast-50: 0, 0, 0, 0.87;
+  --palette-accent-contrast-100: 0, 0, 0, 0.87;
+  --palette-accent-contrast-200: 0, 0, 0, 0.87;
+  --palette-accent-contrast-300: 0, 0, 0, 0.87;
+  --palette-accent-contrast-400: 0, 0, 0, 0.87;
+  --palette-accent-contrast-500: 255, 255, 255, 1;
+  --palette-accent-contrast-600: 255, 255, 255, 1;
+  --palette-accent-contrast-700: 255, 255, 255, 1;
+  --palette-accent-contrast-800: 255, 255, 255, 1;
+  --palette-accent-contrast-900: 255, 255, 255, 1;
+  --palette-warn-50: 251, 231, 233;
+  --palette-warn-100: 245, 194, 199;
+  --palette-warn-200: 238, 154, 162;
+  --palette-warn-300: 231, 114, 125;
+  --palette-warn-400: 225, 83, 97;
+  --palette-warn-500: 220, 53, 69;
+  --palette-warn-600: 216, 48, 62;
+  --palette-warn-700: 211, 40, 54;
+  --palette-warn-800: 206, 34, 46;
+  --palette-warn-900: 197, 22, 31;
+  --palette-warn-A100: 255, 246, 247;
+  --palette-warn-A200: 255, 195, 198;
+  --palette-warn-A400: 255, 144, 149;
+  --palette-warn-A700: 255, 119, 124;
+  --palette-warn-contrast-50: 0, 0, 0, 0.87;
+  --palette-warn-contrast-100: 0, 0, 0, 0.87;
+  --palette-warn-contrast-200: 0, 0, 0, 0.87;
+  --palette-warn-contrast-300: 0, 0, 0, 0.87;
+  --palette-warn-contrast-400: 255, 255, 255, 1;
+  --palette-warn-contrast-500: 255, 255, 255, 1;
+  --palette-warn-contrast-600: 255, 255, 255, 1;
+  --palette-warn-contrast-700: 255, 255, 255, 1;
+  --palette-warn-contrast-800: 255, 255, 255, 1;
+  --palette-warn-contrast-900: 255, 255, 255, 1;
 }
 
 body {

apps/client/src/styles/ghostfolio-style.scss

@@ -1,5 +1,3 @@
-@use 'angular-material-css-vars/public-util' as mat-css-utilities;
-
 $mat-css-dark-theme-selector: '.is-dark-theme';
 
 $alpha-disabled-text: 0.38;

apps/client/src/styles/theme.scss

@@ -0,0 +1,108 @@
+@use '@angular/material' as mat;
+
+$dark-primary-text: rgba(black, 0.87);
+$light-primary-text: white;
+
+$gf-primary: (
+  50: var(--gf-theme-primary-50),
+  100: var(--gf-theme-primary-100),
+  200: var(--gf-theme-primary-200),
+  300: var(--gf-theme-primary-300),
+  400: var(--gf-theme-primary-400),
+  500: var(--gf-theme-primary-500),
+  600: var(--gf-theme-primary-600),
+  700: var(--gf-theme-primary-700),
+  800: var(--gf-theme-primary-800),
+  900: var(--gf-theme-primary-900),
+  A100: var(--gf-theme-primary-A100),
+  A200: var(--gf-theme-primary-A200),
+  A400: var(--gf-theme-primary-A400),
+  A700: var(--gf-theme-primary-A700),
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $light-primary-text,
+    400: $light-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $light-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text
+  )
+);
+
+$gf-secondary: (
+  50: var(--gf-theme-secondary-50),
+  100: var(--gf-theme-secondary-100),
+  200: var(--gf-theme-secondary-200),
+  300: var(--gf-theme-secondary-300),
+  400: var(--gf-theme-secondary-400),
+  500: var(--gf-theme-secondary-500),
+  600: var(--gf-theme-secondary-600),
+  700: var(--gf-theme-secondary-700),
+  800: var(--gf-theme-secondary-800),
+  900: var(--gf-theme-secondary-900),
+  A100: var(--gf-theme-secondary-A100),
+  A200: var(--gf-theme-secondary-A200),
+  A400: var(--gf-theme-secondary-A400),
+  A700: var(--gf-theme-secondary-A700),
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $light-primary-text,
+    400: $light-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $light-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text
+  )
+);
+
+@include mat.core();
+@include mat.legacy-core();
+
+// Create default theme
+$gf-theme-default: mat.define-light-theme(
+  (
+    color: (
+      primary: mat.define-palette($gf-primary),
+      accent: mat.define-palette($gf-secondary, 500, 900, A100)
+    ),
+    density: 0
+  )
+);
+@include mat.all-component-themes($gf-theme-default);
+@include mat.all-legacy-component-themes($gf-theme-default);
+
+// Create dark theme
+$gf-theme-dark: mat.define-dark-theme(
+  (
+    color: (
+      primary: mat.define-palette($gf-primary),
+      accent: mat.define-palette($gf-secondary, 500, 900, A100)
+    ),
+    density: 0
+  )
+);
+.is-dark-theme {
+  @include mat.all-component-colors($gf-theme-dark);
+  @include mat.all-legacy-component-colors($gf-theme-dark);
+}
+
+:root {
+  --gf-theme-primary-500: #36cfcc;
+  --gf-theme-primary-500-rgb: 0, 187, 255;
+  --gf-theme-secondary-500: #3686cf;
+  --gf-theme-secondary-500-rgb: 78, 208, 94;
+}

package.json

@@ -86,7 +86,6 @@
     "@simplewebauthn/server": "5.2.1",
     "@stripe/stripe-js": "1.22.0",
     "alphavantage": "2.2.0",
-    "angular-material-css-vars": "4.2.0",
     "bent": "7.3.12",
     "big.js": "6.2.1",
     "bootstrap": "4.6.0",

yarn.lock

@@ -2682,11 +2682,6 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@ctrl/tinycolor@^3.4.0":
-  version "3.4.1"
-  resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
-  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
-
 "@cypress/listr-verbose-renderer@^0.4.1":
   version "0.4.1"
   resolved "https://registry.npmjs.org/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz"
@@ -7095,14 +7090,6 @@ alphavantage@2.2.0:
   dependencies:
     cross-fetch "^3.0.5"
 
-angular-material-css-vars@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-4.2.0.tgz#364c6cde0ed5f7096541eed95d3a6697e451110f"
-  integrity sha512-6gx5y71BgP+HcICQAUiJ7dlXljnGeJHvadVaIuJAT5bX3uv2jQoODcoLNk3a8wYcU2Z+kk1xsrFYJeB4UQeGNA==
-  dependencies:
-    "@ctrl/tinycolor" "^3.4.0"
-    tslib "^2.3.0"
-
 ansi-align@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz"