feat: new color system

frontend/app/CHANGELOG.md

@@ -1,11 +1,5 @@
 # @openstapps/app
 
-## 3.3.3
-
-### Patch Changes
-
-- 496b50d8: Bug fixes and Android target sdk version is now 34
-
 ## 3.3.2
 
 ### Patch Changes

frontend/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/app",
   "description": "The generic app tailored to fulfill needs of German universities, written using Ionic Framework.",
-  "version": "3.3.3",
+  "version": "3.3.2",
   "private": true,
   "license": "GPL-3.0-only",
   "author": "Karl-Philipp Wulfert <krlwlfrt@gmail.com>",
@@ -82,6 +82,7 @@
     "@ionic/angular": "7.8.0",
     "@ionic/storage-angular": "4.0.0",
     "@maplibre/ngx-maplibre-gl": "17.4.1",
+    "@material/material-color-utilities": "0.3.0",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
     "@openid/appauth": "1.3.1",
@@ -97,7 +98,7 @@
     "form-data": "4.0.0",
     "geojson": "0.5.0",
     "ionic-appauth": "0.9.0",
-    "jsonpath-plus": "10.0.6",
+    "jsonpath-plus": "6.0.1",
     "maplibre-gl": "4.0.2",
     "material-symbols": "0.17.1",
     "moment": "2.30.1",

frontend/app/src/app/app.module.ts

@@ -71,6 +71,7 @@ import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
 import maplibregl from 'maplibre-gl';
 import {Protocol} from 'pmtiles';
+import {ThemeProvider} from './util/theme.provider';
 
 registerLocaleData(localeDe);
 
@@ -89,6 +90,7 @@ export function initializerFactory(
   defaultAuthService: DefaultAuthService,
   paiaAuthService: PAIAAuthService,
   dateFnsConfigurationService: DateFnsConfigurationService,
+  _themeProvider: ThemeProvider,
 ) {
   return async () => {
     try {
@@ -213,6 +215,7 @@ export function createTranslateLoader(http: HttpClient) {
         DefaultAuthService,
         PAIAAuthService,
         DateFnsConfigurationService,
+        ThemeProvider,
       ],
       useFactory: initializerFactory,
     },

frontend/app/src/app/modules/auth/auth-helper.service.ts

@@ -81,6 +81,7 @@ export class AuthHelperService {
       user[key as keyof SCUserConfiguration] = JSONPath({
         path: this.userConfigurationMap[key as keyof SCUserConfiguration] as string,
         json: userInfo,
+        preventEval: true,
       })[0];
     }
     if (user.givenName && user.givenName.length > 0 && user.familyName && user.familyName.length > 0) {

frontend/app/src/app/modules/profile/id-cards.provider.ts

@@ -41,7 +41,7 @@ export class IdCardsProvider {
                 mergeMap(user => this.fetchFallbackIdCards(user)),
                 startWith([]),
               )
-          : of([]).pipe(tap({next: () => this.encryptedStorageProvider.delete('id-cards')})),
+          : of([]).pipe(tap(() => this.encryptedStorageProvider.delete('id-cards'))),
       ),
     );
   }
@@ -54,7 +54,7 @@ export class IdCardsProvider {
         },
         responseType: 'json',
       })
-      .pipe(tap({next: idCards => this.encryptedStorageProvider.set('id-cards', idCards)}));
+      .pipe(tap(idCards => this.encryptedStorageProvider.set('id-cards', idCards)));
   }
 
   private fetchFallbackIdCards(user: SCUserConfiguration): Observable<SCIdCard[]> {

frontend/app/src/app/util/media-query.pipe.ts

@@ -1,6 +1,7 @@
 import {PipeTransform} from '@angular/core';
 import {Pipe} from '@angular/core';
-import {Observable, fromEvent, map, startWith} from 'rxjs';
+import {Observable} from 'rxjs';
+import {fromMediaQuery} from './rxjs/from-media-query';
 
 @Pipe({
   name: 'mediaQuery',
@@ -9,10 +10,6 @@ import {Observable, fromEvent, map, startWith} from 'rxjs';
 })
 export class MediaQueryPipe implements PipeTransform {
   transform(query: string): Observable<boolean> {
-    const match = window.matchMedia(query);
-    return fromEvent<MediaQueryListEvent>(match, 'change').pipe(
-      map(event => event.matches),
-      startWith(match.matches),
-    );
+    return fromMediaQuery(query);
   }
 }

frontend/app/src/app/util/rxjs/from-media-query.ts

@@ -0,0 +1,38 @@
+import {Observable, combineLatest, defer, distinctUntilChanged, fromEvent, map, startWith} from 'rxjs';
+
+/**
+ * Lazily creates an Observable that emits whether the given media query matches.
+ * @example
+ * fromMediaQuery('(prefers-color-scheme: dark)').subscribe(matches => console.log(matches))
+ */
+export function fromMediaQuery(query: string): Observable<boolean> {
+  return defer(() => {
+    const match = window.matchMedia(query);
+    return fromEvent<MediaQueryListEvent>(match, 'change').pipe(
+      map(event => event.matches),
+      startWith(match.matches),
+    );
+  });
+}
+
+/**
+ * Like `fromMediaQuery`, but combines multiple matches.
+ * Since the list of values may not be exhaustive, the result can be `undefined`
+ * @example
+ * fromMediaQueryValues('prefers-color-scheme', ['dark', 'light']).subscribe(value => console.log(value))
+ */
+export function fromMediaQueryValues<T extends string>(
+  property: string,
+  values: T[],
+): Observable<T | undefined> {
+  return defer(() =>
+    combineLatest(
+      values.map(value =>
+        fromMediaQuery(`(${property}: ${value})`).pipe(map(matches => [value, matches] as const)),
+      ),
+    ).pipe(
+      map(matches => matches.find(([, matches]) => matches)?.[0]),
+      distinctUntilChanged(),
+    ),
+  );
+}

frontend/app/src/app/util/theme-ionic-utils.ts

@@ -0,0 +1,288 @@
+import {Hct, argbFromHex, hexFromArgb} from '@material/material-color-utilities';
+import {
+  IonTheme,
+  IonThemeColorDarkLight,
+  IonThemeOptions,
+  ThemeCustomColor,
+  ThemeCustomColorOptions,
+} from './theme-types';
+import {dynamicScheme, makeCustomColor} from './theme-utils';
+
+/**
+ * Turn a custom material color to a color that can be used in Ionic
+ */
+export function ionColorFromCustomColor(color: ThemeCustomColor): IonThemeColorDarkLight {
+  return {
+    palette: color.palette,
+    light: {
+      color: color.light.color,
+      colorContrast: color.light.onColor,
+      colorShade: color.fixed.dim,
+      colorTint: color.fixed.color,
+    },
+    dark: {
+      color: color.dark.color,
+      colorContrast: color.dark.onColor,
+      colorShade: color.fixed.dim,
+      colorTint: color.fixed.color,
+    },
+  };
+}
+
+/**
+ * Create an Ionic theme
+ */
+export function makeIonicTheme(options: IonThemeOptions): IonTheme {
+  const light = dynamicScheme(
+    options.variant,
+    Hct.fromInt(options.sourceColor),
+    false,
+    options.contrastLevel,
+  );
+  const dark = dynamicScheme(options.variant, Hct.fromInt(options.sourceColor), true, options.contrastLevel);
+  const customColorOptions: Omit<ThemeCustomColorOptions, 'color'> = {
+    blend: true,
+    sourceColor: options.sourceColor,
+    variant: options.variant,
+    contrastLevel: options.contrastLevel,
+  };
+
+  return {
+    success: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#00ff00'), ...customColorOptions})),
+    warning: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#ffdd00'), ...customColorOptions})),
+    danger: ionColorFromCustomColor(makeCustomColor({color: argbFromHex('#ff4444'), ...customColorOptions})),
+    primary: {
+      palette: light.primaryPalette,
+      light: {
+        color: light.primary,
+        colorContrast: light.onPrimary,
+        colorShade: light.primaryFixedDim,
+        colorTint: light.primaryFixed,
+      },
+      dark: {
+        color: dark.primary,
+        colorContrast: dark.onPrimary,
+        colorShade: dark.primaryFixedDim,
+        colorTint: dark.primaryFixed,
+      },
+    },
+    secondary: {
+      palette: light.secondaryPalette,
+      light: {
+        color: light.secondary,
+        colorContrast: light.onSecondary,
+        colorShade: light.secondaryFixedDim,
+        colorTint: light.secondaryFixed,
+      },
+      dark: {
+        color: dark.secondary,
+        colorContrast: dark.onSecondary,
+        colorShade: dark.secondaryFixedDim,
+        colorTint: dark.secondaryFixed,
+      },
+    },
+    tertiary: {
+      palette: light.tertiaryPalette,
+      light: {
+        color: light.tertiary,
+        colorContrast: light.onTertiary,
+        colorShade: light.tertiaryFixedDim,
+        colorTint: light.tertiaryFixed,
+      },
+      dark: {
+        color: dark.tertiary,
+        colorContrast: dark.onTertiary,
+        colorShade: dark.tertiaryFixedDim,
+        colorTint: dark.tertiaryFixed,
+      },
+    },
+    light: {
+      palette: light.neutralPalette,
+      light: {
+        color: light.neutralPalette.tone(90),
+        colorContrast: light.onSurface,
+        colorShade: light.neutralPalette.tone(85),
+        colorTint: light.neutralPalette.tone(95),
+      },
+      dark: {
+        color: dark.surfaceContainerLowest,
+        colorContrast: dark.onSurface,
+        // TODO: find a better color for these
+        colorShade: dark.surfaceBright,
+        colorTint: dark.surfaceBright,
+      },
+    },
+    medium: {
+      palette: light.neutralVariantPalette,
+      light: {
+        color: light.neutralPalette.tone(50),
+        colorContrast: light.onSurfaceVariant,
+        colorShade: light.neutralPalette.tone(45),
+        colorTint: light.neutralPalette.tone(55),
+      },
+      dark: {
+        color: dark.surfaceVariant,
+        colorContrast: dark.onSurfaceVariant,
+        // TODO: find a better color for these
+        colorShade: dark.surfaceContainerLow,
+        colorTint: dark.surfaceContainerHigh,
+      },
+    },
+    dark: {
+      palette: light.neutralPalette,
+      light: {
+        color: light.surfaceContainerHigh,
+        colorContrast: light.onSurface,
+        colorShade: light.surfaceContainerHighest,
+        colorTint: light.surfaceContainer,
+      },
+      dark: {
+        color: dark.surfaceContainerHighest,
+        colorContrast: dark.onSurface,
+        // TODO: find a better color for these
+        colorShade: dark.surfaceDim,
+        colorTint: dark.surfaceDim,
+      },
+    },
+    background: {
+      palette: light.neutralPalette,
+      light: {
+        backgroundColor: light.background,
+        textColor: light.onBackground,
+        boxShadowColor: light.shadow,
+        placeholderColor: light.onSurfaceVariant,
+      },
+      dark: {
+        backgroundColor: dark.background,
+        textColor: dark.onBackground,
+        boxShadowColor: dark.shadow,
+        placeholderColor: dark.onSurfaceVariant,
+      },
+    },
+    item: {
+      palette: light.neutralPalette,
+      light: {
+        itemBackground: light.surface,
+        itemColor: light.onSurface,
+        cardBackground: light.surfaceContainer,
+        itemBorderColor: light.outline,
+        borderColor: light.outline,
+      },
+      dark: {
+        itemBackground: dark.surface,
+        itemColor: dark.onSurface,
+        cardBackground: dark.surfaceContainer,
+        itemBorderColor: dark.outline,
+        borderColor: dark.outline,
+      },
+    },
+  };
+}
+
+/**
+ * Simple color
+ */
+function color(element: HTMLElement, name: string, argb: number) {
+  element.style.setProperty(name, hexFromArgb(argb));
+}
+
+/**
+ * Color, in RGB
+ */
+function colorRgb(element: HTMLElement, name: string, argb: number) {
+  element.style.setProperty(name, `${(argb >> 16) & 0xff}, ${(argb >> 8) & 0xff}, ${argb & 0xff}`);
+}
+
+/**
+ * Apply the Ionic color to an element
+ */
+export function applyIonicAccentColor(
+  element: HTMLElement,
+  name: string,
+  colors: IonThemeColorDarkLight,
+  dark: boolean,
+) {
+  const operations = [
+    ['', dark ? colors.dark : colors.light],
+    ['-dark', colors.dark],
+    ['-light', colors.light],
+  ] as const;
+
+  for (const [suffix, colors] of operations) {
+    color(element, `--ion-color-${name}${suffix}`, colors.color);
+    color(element, `--ion-color-${name}-contrast${suffix}`, colors.colorContrast);
+    color(element, `--ion-color-${name}-shade${suffix}`, colors.colorShade);
+    color(element, `--ion-color-${name}-tint${suffix}`, colors.colorTint);
+
+    colorRgb(element, `--ion-color-${name}-rgb${suffix}`, colors.color);
+    colorRgb(element, `--ion-color-${name}-contrast-rgb${suffix}`, colors.colorContrast);
+    colorRgb(element, `--ion-color-${name}-shade-rgb${suffix}`, colors.colorShade);
+    colorRgb(element, `--ion-color-${name}-tint-rgb${suffix}`, colors.colorTint);
+  }
+}
+
+/**
+ * Apply the theme
+ */
+export function applyIonicTheme(element: HTMLElement, theme: IonTheme, dark: boolean) {
+  applyIonicAccentColor(element, 'primary', theme.primary, dark);
+  applyIonicAccentColor(element, 'secondary', theme.secondary, dark);
+  applyIonicAccentColor(element, 'tertiary', theme.tertiary, dark);
+  applyIonicAccentColor(element, 'success', theme.success, dark);
+  applyIonicAccentColor(element, 'warning', theme.warning, dark);
+  applyIonicAccentColor(element, 'danger', theme.danger, dark);
+  applyIonicAccentColor(element, 'dark', theme.dark, dark);
+  applyIonicAccentColor(element, 'medium', theme.medium, dark);
+  applyIonicAccentColor(element, 'light', theme.light, dark);
+
+  const backgroundOps = [
+    ['', dark ? theme.background.dark : theme.background.light],
+    ['-dark', theme.background.dark],
+    ['-light', theme.background.light],
+  ] as const;
+
+  for (const [suffix, background] of backgroundOps) {
+    color(element, `--ion-background-color${suffix}`, background.backgroundColor);
+    color(element, `--ion-text-color${suffix}`, background.textColor);
+    color(element, `--ion-box-shadow-color${suffix}`, background.boxShadowColor);
+    color(element, `--ion-placeholder-color${suffix}`, background.placeholderColor);
+
+    colorRgb(element, `--ion-background-color-rgb${suffix}`, background.backgroundColor);
+    colorRgb(element, `--ion-text-color-rgb${suffix}`, background.textColor);
+    colorRgb(element, `--ion-box-shadow-color-rgb${suffix}`, background.boxShadowColor);
+    colorRgb(element, `--ion-placeholder-color-rgb${suffix}`, background.placeholderColor);
+  }
+
+  const stepOps = [
+    ['', dark ? true : false],
+    ['-dark', true],
+    ['-light', false],
+  ] as const;
+
+  for (const [suffix, reverse] of stepOps) {
+    for (let i = 5; i < 100; i += 5) {
+      const ionicTone = 10 * (reverse ? 100 - i : i);
+      color(element, `--ion-color-step-${ionicTone}${suffix}`, theme.background.palette.tone(i));
+    }
+  }
+
+  const itemOps = [
+    ['', dark ? theme.item.dark : theme.item.light],
+    ['-dark', theme.item.dark],
+    ['-light', theme.item.light],
+  ] as const;
+
+  for (const [suffix, item] of itemOps) {
+    color(element, `--ion-item-background${suffix}`, item.itemBackground);
+    color(element, `--ion-card-background${suffix}`, item.cardBackground);
+    color(element, `--ion-item-border-color${suffix}`, item.itemBorderColor);
+    color(element, `--ion-border-color${suffix}`, item.borderColor);
+    color(element, `--ion-item-color${suffix}`, item.itemColor);
+
+    colorRgb(element, `--ion-item-background-rgb${suffix}`, item.itemBackground);
+    colorRgb(element, `--ion-card-background-rgb${suffix}`, item.cardBackground);
+    colorRgb(element, `--ion-item-border-color-rgb${suffix}`, item.itemBorderColor);
+    colorRgb(element, `--ion-border-color-rgb${suffix}`, item.borderColor);
+    colorRgb(element, `--ion-item-color-rgb${suffix}`, item.itemColor);
+  }
+}

frontend/app/src/app/util/theme-types.ts

@@ -0,0 +1,109 @@
+import {TonalPalette} from '@material/material-color-utilities';
+
+export const THEME_VARIANTS = [
+  'content',
+  'neutral',
+  'rainbow',
+  'vibrant',
+  'fidelity',
+  'expressive',
+  'monochrome',
+  'tonal-spot',
+  'fruit-salad',
+] as const;
+export type ThemeVariant = (typeof THEME_VARIANTS)[number];
+
+export interface ThemeCustomColorOptions {
+  color: number;
+  blend: boolean;
+  sourceColor: number;
+  variant: ThemeVariant;
+  contrastLevel: number;
+}
+
+export interface ThemeColorNormal {
+  color: number;
+  onColor: number;
+  container: number;
+  onContainer: number;
+}
+
+/**
+ * Palette that can be used in both light and dark mode.
+ * Caution: check contrast level before using
+ * @see https://m3.material.io/styles/color/roles#26b6a882-064d-4668-b096-c51142477850
+ */
+export interface ThemeColorFixed {
+  color: number;
+  onColor: number;
+  /**
+   * Lower emphasis against fixed color
+   */
+  onVariant: number;
+  dim: number;
+}
+
+export interface ThemeCustomColor {
+  color: number;
+  source: number;
+  palette: TonalPalette;
+  light: ThemeColorNormal;
+  dark: ThemeColorNormal;
+  fixed: ThemeColorFixed;
+}
+
+export interface IonThemeOptions {
+  sourceColor: number;
+  contrastLevel: number;
+  variant: ThemeVariant;
+}
+
+export interface IonThemeColor {
+  color: number;
+  colorContrast: number;
+  colorShade: number;
+  colorTint: number;
+}
+
+export interface IonThemeColorDarkLight {
+  palette: TonalPalette;
+  dark: IonThemeColor;
+  light: IonThemeColor;
+}
+
+export interface IonThemeBackground {
+  backgroundColor: number;
+  textColor: number;
+  boxShadowColor: number;
+  placeholderColor: number;
+}
+
+export interface IonThemeItem {
+  itemBackground: number;
+  cardBackground: number;
+  itemBorderColor: number;
+  borderColor: number;
+  itemColor: number;
+}
+
+export interface IonTheme {
+  primary: IonThemeColorDarkLight;
+  secondary: IonThemeColorDarkLight;
+  tertiary: IonThemeColorDarkLight;
+  success: IonThemeColorDarkLight;
+  warning: IonThemeColorDarkLight;
+  danger: IonThemeColorDarkLight;
+  dark: IonThemeColorDarkLight;
+  medium: IonThemeColorDarkLight;
+  light: IonThemeColorDarkLight;
+  background: {
+    palette: TonalPalette;
+    light: IonThemeBackground;
+    dark: IonThemeBackground;
+  };
+  item: {
+    palette: TonalPalette;
+    light: IonThemeItem;
+    dark: IonThemeItem;
+  };
+}

frontend/app/src/app/util/theme-utils.ts

@@ -0,0 +1,93 @@
+import {
+  Blend,
+  Hct,
+  SchemeContent,
+  SchemeExpressive,
+  SchemeFidelity,
+  SchemeFruitSalad,
+  SchemeMonochrome,
+  SchemeNeutral,
+  SchemeRainbow,
+  SchemeTonalSpot,
+  SchemeVibrant,
+} from '@material/material-color-utilities';
+import {ThemeCustomColor, ThemeCustomColorOptions, ThemeVariant} from './theme-types';
+
+export const DEFAULT_CONTRAST = 0;
+export const GLOBAL_CONTRAST = {
+  'more': 4,
+  'less': 0,
+  'no-preference': 0,
+};
+
+/**
+ * Creates a DynamicScheme based on the variant.
+ */
+export function dynamicScheme(
+  variant: ThemeVariant,
+  sourceColorHct: Hct,
+  isDark: boolean,
+  contrastLevel: number,
+) {
+  switch (variant) {
+    case 'content': {
+      return new SchemeContent(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'neutral': {
+      return new SchemeNeutral(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'rainbow': {
+      return new SchemeRainbow(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'vibrant': {
+      return new SchemeVibrant(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'fidelity': {
+      return new SchemeFidelity(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'expressive': {
+      return new SchemeExpressive(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'monochrome': {
+      return new SchemeMonochrome(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'tonal-spot': {
+      return new SchemeTonalSpot(sourceColorHct, isDark, contrastLevel);
+    }
+    case 'fruit-salad': {
+      return new SchemeFruitSalad(sourceColorHct, isDark, contrastLevel);
+    }
+  }
+}
+
+/**
+ * Create a custom color that works with the theme
+ */
+export function makeCustomColor(options: ThemeCustomColorOptions): ThemeCustomColor {
+  const color = options.blend ? Blend.harmonize(options.color, options.sourceColor) : options.color;
+  const light = dynamicScheme(options.variant, Hct.fromInt(color), false, options.contrastLevel);
+  const dark = dynamicScheme(options.variant, Hct.fromInt(color), true, options.contrastLevel);
+  return {
+    color,
+    source: options.color,
+    palette: light.primaryPalette,
+    light: {
+      color: light.primary,
+      onColor: light.onPrimary,
+      container: light.primaryContainer,
+      onContainer: light.onPrimaryContainer,
+    },
+    dark: {
+      color: dark.primary,
+      onColor: dark.onPrimary,
+      container: dark.primaryContainer,
+      onContainer: dark.onPrimaryContainer,
+    },
+    fixed: {
+      color: light.primaryFixed,
+      onColor: light.onPrimaryFixed,
+      dim: light.primaryFixedDim,
+      onVariant: light.onPrimaryFixedVariant,
+    },
+  };
+}

frontend/app/src/app/util/theme.provider.ts

@@ -0,0 +1,61 @@
+import {Injectable} from '@angular/core';
+import {fromMediaQuery, fromMediaQueryValues} from './rxjs/from-media-query';
+import {BehaviorSubject, Observable, combineLatest, distinctUntilChanged, map} from 'rxjs';
+import {argbFromHex} from '@material/material-color-utilities';
+import {applyIonicTheme, makeIonicTheme} from './theme-ionic-utils';
+import {DEFAULT_CONTRAST, GLOBAL_CONTRAST} from './theme-utils';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {ThemeVariant} from './theme-types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeProvider {
+  prefersDark = fromMediaQuery('(prefers-color-scheme: dark)');
+
+  constrastPreference = fromMediaQueryValues('prefers-contrast', ['more', 'less', 'no-preference']);
+
+  // TODO: fetch the color from somewhere
+  settingThemeColor = new BehaviorSubject<string>('#3880FF');
+
+  settingThemeVariant = new BehaviorSubject<ThemeVariant>('content');
+
+  settingThemeContrast = new BehaviorSubject<number | undefined>(undefined);
+
+  settingThemeMode = new BehaviorSubject<'light' | 'dark' | undefined>(undefined);
+
+  themeSourceColor = this.settingThemeColor.pipe(map(argbFromHex));
+
+  themeVariant = this.settingThemeVariant.asObservable();
+
+  themeContrastLevel: Observable<number> = combineLatest([
+    this.constrastPreference,
+    this.settingThemeContrast,
+  ]).pipe(
+    map(([prefersContrast, customContrast]) =>
+      customContrast === undefined
+        ? prefersContrast === undefined
+          ? DEFAULT_CONTRAST
+          : GLOBAL_CONTRAST[prefersContrast]
+        : customContrast,
+    ),
+    distinctUntilChanged(),
+  );
+
+  themeIsDark = combineLatest([this.prefersDark, this.settingThemeMode]).pipe(
+    map(([prefersDark, customMode]) => (customMode === undefined ? prefersDark : customMode === 'dark')),
+    distinctUntilChanged(),
+  );
+
+  ionicTheme = combineLatest([this.themeContrastLevel, this.themeVariant, this.themeSourceColor]).pipe(
+    map(([contrastLevel, variant, sourceColor]) => makeIonicTheme({variant, sourceColor, contrastLevel})),
+  );
+
+  constructor() {
+    combineLatest([this.ionicTheme, this.themeIsDark])
+      .pipe(takeUntilDestroyed())
+      .subscribe(([theme, isDark]) => {
+        applyIonicTheme(document.documentElement, theme, isDark);
+      });
+  }
+}

frontend/app/src/theme/colors.scss

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 @import './util/color-system';
-
+/*
 @include ion-color(primary, #3880ff);
 @include ion-color(secondary, #32db64);
 @include ion-color(tertiary, #f4a942);
@@ -26,6 +26,7 @@
 
 @include ion-background-color(#f5f5f5, #000);
 @include ion-item-color(#fff, #0e0e0e);
+*/
 
 :root {
   --calender-lecture-card: var(--ion-color-primary-tint);

pnpm-lock.yaml

@@ -791,6 +791,9 @@ importers:
       '@maplibre/ngx-maplibre-gl':
         specifier: 17.4.1
         version: 17.4.1(@angular/common@17.3.0)(@angular/core@17.3.0)(maplibre-gl@4.0.2)(rxjs@7.8.1)
+      '@material/material-color-utilities':
+        specifier: 0.3.0
+        version: 0.3.0
       '@ngx-translate/core':
         specifier: 15.0.0
         version: 15.0.0(@angular/common@17.3.0)(@angular/core@17.3.0)(rxjs@7.8.1)
@@ -837,8 +840,8 @@ importers:
         specifier: 0.9.0
         version: 0.9.0(rxjs@7.8.1)
       jsonpath-plus:
-        specifier: 10.0.6
-        version: 10.0.6
+        specifier: 6.0.1
+        version: 6.0.1
       maplibre-gl:
         specifier: 4.0.2
         version: 4.0.2
@@ -5522,7 +5525,7 @@ packages:
       object-assign: 4.1.1
       open: 8.4.0
       proxy-middleware: 0.15.0
-      send: 1.1.0
+      send: 0.19.0
       serve-index: 1.9.1
     transitivePeerDependencies:
       - supports-color
@@ -6971,24 +6974,6 @@ packages:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  /@jsep-plugin/assignment@1.2.1(jsep@1.3.9):
-    resolution: {integrity: sha512-gaHqbubTi29aZpVbBlECRpmdia+L5/lh2BwtIJTmtxdbecEyyX/ejAOg7eQDGNvGOUmPY7Z2Yxdy9ioyH/VJeA==}
-    engines: {node: '>= 10.16.0'}
-    peerDependencies:
-      jsep: ^0.4.0||^1.0.0
-    dependencies:
-      jsep: 1.3.9
-    dev: false
-
-  /@jsep-plugin/regex@1.0.3(jsep@1.3.9):
-    resolution: {integrity: sha512-XfZgry4DwEZvSFtS/6Y+R48D7qJYJK6R9/yJFyUFHCIUMEEHuJ4X95TDgJp5QkmzfLYvapMPzskV5HpIDrREug==}
-    engines: {node: '>= 10.16.0'}
-    peerDependencies:
-      jsep: ^0.4.0||^1.0.0
-    dependencies:
-      jsep: 1.3.9
-    dev: false
-
   /@leichtgewicht/ip-codec@2.0.5:
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
     dev: true
@@ -7085,6 +7070,10 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@material/material-color-utilities@0.3.0:
+    resolution: {integrity: sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==}
+    dev: false
+
   /@ngtools/webpack@17.3.0(@angular/compiler-cli@17.3.0)(typescript@5.4.2)(webpack@5.90.3):
     resolution: {integrity: sha512-wNTCDPPEtjP4mxYerLVLCMwOCTEOD2HqZMVXD8pJbarrGPMuoyglUZuqNSIS5KVqR+fFez6JEUnMvC3QSqf58w==}
     engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -11984,11 +11973,6 @@ packages:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
 
-  /encodeurl@2.0.0:
-    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
-    engines: {node: '>= 0.8'}
-    dev: true
-
   /encoding@0.1.13:
     resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
     requiresBuild: true
@@ -14943,11 +14927,6 @@ packages:
     resolution: {integrity: sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ==}
     engines: {node: '>=12.0.0'}
 
-  /jsep@1.3.9:
-    resolution: {integrity: sha512-i1rBX5N7VPl0eYb6+mHNp52sEuaS2Wi8CDYx1X5sn9naevL78+265XJqy1qENEk7mRKwS06NHpUqiBwR7qeodw==}
-    engines: {node: '>= 10.16.0'}
-    dev: false
-
   /jsesc@0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
@@ -15039,14 +15018,9 @@ packages:
     engines: {'0': node >= 0.2.0}
     dev: true
 
-  /jsonpath-plus@10.0.6:
-    resolution: {integrity: sha512-Q0KCash90S0WQnPnE/W0uVXQSww4NkO34COfs+gbq0fk+Kv03FYpZ+uU2I7soLLaS4d/ywsm9PxplZsTMmfBmg==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
-    dependencies:
-      '@jsep-plugin/assignment': 1.2.1(jsep@1.3.9)
-      '@jsep-plugin/regex': 1.0.3(jsep@1.3.9)
-      jsep: 1.3.9
+  /jsonpath-plus@6.0.1:
+    resolution: {integrity: sha512-EvGovdvau6FyLexFH2OeXfIITlgIbgZoAZe3usiySeaIDm5QS+A10DKNpaPBBqqRSZr2HN6HVNXxtwUAr2apEw==}
+    engines: {node: '>=10.0.0'}
     dev: false
 
   /jsonpointer@5.0.1:
@@ -18961,18 +18935,19 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /send@1.1.0:
-    resolution: {integrity: sha512-v67WcEouB5GxbTWL/4NeToqcZiAWEq90N888fczVArY8A79J0L4FD7vj5hm3eUMua5EpoQ59wa/oovY6TLvRUA==}
-    engines: {node: '>= 18'}
+  /send@0.19.0:
+    resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
+    engines: {node: '>= 0.8.0'}
     dependencies:
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 2.6.9
+      depd: 2.0.0
       destroy: 1.2.0
-      encodeurl: 2.0.0
+      encodeurl: 1.0.2
       escape-html: 1.0.3
       etag: 1.8.1
       fresh: 0.5.2
       http-errors: 2.0.0
-      mime-types: 2.1.35
+      mime: 1.6.0
       ms: 2.1.3
       on-finished: 2.4.1
       range-parser: 1.2.1