feat: new color system

fix: enable starting the app without backend
Closes #223
2025-12-31 10:32:54 +00:00 · 2024-10-02 13:01:56 +02:00 · 2024-09-30 11:03:53 +00:00 · 2024-09-30 13:00:59 +02:00 · 2024-09-18 09:53:50 +00:00 · 2024-08-06 17:43:59 +02:00
28 changed files with 4679 additions and 2429 deletions
--- a/flake.nix
+++ b/flake.nix
@@ -4,68 +4,86 @@
    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
    flake-utils.url = "github:numtide/flake-utils";
  };
-  outputs = {
-    self,
-    nixpkgs,
-    flake-utils,
-  }: let
-    aapt2buildToolsVersion = "33.0.2";
-  in
-    flake-utils.lib.eachDefaultSystem (system: let
-      pkgs = import nixpkgs {
-        inherit system;
-        overlays = [
-          (final: prev: rec {
-            fontMin = prev.python311.withPackages (ps: with ps; [brotli fonttools] ++ (with fonttools.optional-dependencies; [woff]));
-            android = prev.androidenv.composeAndroidPackages {
-              buildToolsVersions = ["30.0.3" aapt2buildToolsVersion];
-              platformVersions = ["33"];
-            };
-            cypress = prev.cypress.overrideAttrs (cyPrev: rec {
-              version = "13.2.0";
-              src = prev.fetchzip {
-                url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
-                hash = "sha256-9o0nprGcJhudS1LNm+T7Vf0Dwd1RBauYKI+w1FBQ3ZM=";
+  outputs =
+    {
+      self,
+      nixpkgs,
+      flake-utils,
+    }:
+    let
+      aapt2buildToolsVersion = "33.0.2";
+    in
+    flake-utils.lib.eachDefaultSystem (
+      system:
+      let
+        pkgs = import nixpkgs {
+          inherit system;
+          overlays = [
+            (final: prev: rec {
+              fontMin = prev.python311.withPackages (
+                ps:
+                with ps;
+                [
+                  brotli
+                  fonttools
+                ]
+                ++ (with fonttools.optional-dependencies; [ woff ])
+              );
+              android = prev.androidenv.composeAndroidPackages {
+                buildToolsVersions = [
+                  "34.0.0"
+                  aapt2buildToolsVersion
+                ];
+                platformVersions = [ "34" ];
              };
-            });
-            nodejs = prev.nodejs_18;
-          })
-        ];
-        config = {
-          allowUnfree = true;
-          android_sdk.accept_license = true;
+              cypress = prev.cypress.overrideAttrs (cyPrev: rec {
+                version = "13.2.0";
+                src = prev.fetchzip {
+                  url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
+                  hash = "sha256-9o0nprGcJhudS1LNm+T7Vf0Dwd1RBauYKI+w1FBQ3ZM=";
+                };
+              });
+              nodejs = prev.nodejs_18;
+              corepack = prev.corepack_18;
+            })
+          ];
+          config = {
+            allowUnfree = true;
+            android_sdk.accept_license = true;
+          };
        };
-      };
-      androidFhs = pkgs.buildFHSUserEnv {
-        name = "android-env";
-        targetPkgs = pkgs: with pkgs; [];
-        runScript = "bash";
-        profile = ''
-          export ALLOW_NINJA_ENV=true
-          export USE_CCACHE=1
-          export LD_LIBRARY_PATH=/usr/lib:/usr/lib32
-        '';
-      };
-    in {
-      devShell = pkgs.mkShell rec {
-        nativeBuildInputs = [androidFhs];
-        buildInputs = with pkgs; [
-          nodejs
-          corepack
-          # tools
-          curl
-          jq
-          fontMin
-          cypress
-          # android
-          jdk17
-          android.androidsdk
-        ];
-        ANDROID_JAVA_HOME = "${pkgs.jdk.home}";
-        ANDROID_SDK_ROOT = "${pkgs.android.androidsdk}/libexec/android-sdk";
-        GRADLE_OPTS = "-Dorg.gradle.project.android.aapt2FromMavenOverride=${ANDROID_SDK_ROOT}/build-tools/${aapt2buildToolsVersion}/aapt2";
-        CYPRESS_INSTALL_BINARY = "0";
-        CYPRESS_RUN_BINARY = "${pkgs.cypress}/bin/Cypress";
-      };
-    });
+        androidFhs = pkgs.buildFHSUserEnv {
+          name = "android-env";
+          targetPkgs = pkgs: with pkgs; [ ];
+          runScript = "bash";
+          profile = ''
+            export ALLOW_NINJA_ENV=true
+            export USE_CCACHE=1
+            export LD_LIBRARY_PATH=/usr/lib:/usr/lib32
+          '';
+        };
+      in
+      {
+        devShell = pkgs.mkShell rec {
+          nativeBuildInputs = [ androidFhs ];
+          buildInputs = with pkgs; [
+            nodejs
+            corepack
+            # tools
+            curl
+            jq
+            fontMin
+            cypress
+            # android
+            jdk17
+            android.androidsdk
+          ];
+          ANDROID_JAVA_HOME = "${pkgs.jdk.home}";
+          ANDROID_SDK_ROOT = "${pkgs.android.androidsdk}/libexec/android-sdk";
+          GRADLE_OPTS = "-Dorg.gradle.project.android.aapt2FromMavenOverride=${ANDROID_SDK_ROOT}/build-tools/${aapt2buildToolsVersion}/aapt2";
+          CYPRESS_INSTALL_BINARY = "0";
+          CYPRESS_RUN_BINARY = "${pkgs.cypress}/bin/Cypress";
+        };
+      }
+    );
 }
--- a/frontend/app/android/app/build.gradle
+++ b/frontend/app/android/app/build.gradle
@@ -2,7 +2,7 @@ apply plugin: 'com.android.application'

 android {
    namespace "de.anyschool.app"
-    compileSdkVersion rootProject.ext.compileSdkVersion
+    compileSdk rootProject.ext.compileSdkVersion
    defaultConfig {
        applicationId "de.anyschool.app"
        minSdkVersion rootProject.ext.minSdkVersion
--- a/frontend/app/android/build.gradle
+++ b/frontend/app/android/build.gradle
@@ -7,8 +7,8 @@ buildscript {
        mavenCentral()
    }
    dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.0'
-        classpath 'com.google.gms:google-services:4.3.15'
+        classpath 'com.android.tools.build:gradle:8.2.1'
+        classpath 'com.google.gms:google-services:4.4.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
--- a/frontend/app/android/capacitor.settings.gradle
+++ b/frontend/app/android/capacitor.settings.gradle
@@ -1,57 +1,57 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
-project(':capacitor-android').projectDir = new File('../../../node_modules/.pnpm/@capacitor+android@5.7.3_@capacitor+core@5.7.3/node_modules/@capacitor/android/capacitor')
+project(':capacitor-android').projectDir = new File('../../../node_modules/.pnpm/@capacitor+android@6.1.1_@capacitor+core@6.1.1/node_modules/@capacitor/android/capacitor')

 include ':capacitor-community-screen-brightness'
-project(':capacitor-community-screen-brightness').projectDir = new File('../../../node_modules/.pnpm/@capacitor-community+screen-brightness@6.0.0_@capacitor+core@5.7.3/node_modules/@capacitor-community/screen-brightness/android')
+project(':capacitor-community-screen-brightness').projectDir = new File('../../../node_modules/.pnpm/@capacitor-community+screen-brightness@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor-community/screen-brightness/android')

 include ':capacitor-app'
-project(':capacitor-app').projectDir = new File('../../../node_modules/.pnpm/@capacitor+app@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/app/android')
+project(':capacitor-app').projectDir = new File('../../../node_modules/.pnpm/@capacitor+app@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/app/android')

 include ':capacitor-browser'
-project(':capacitor-browser').projectDir = new File('../../../node_modules/.pnpm/@capacitor+browser@5.2.0_@capacitor+core@5.7.3/node_modules/@capacitor/browser/android')
+project(':capacitor-browser').projectDir = new File('../../../node_modules/.pnpm/@capacitor+browser@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/browser/android')

 include ':capacitor-clipboard'
-project(':capacitor-clipboard').projectDir = new File('../../../node_modules/.pnpm/@capacitor+clipboard@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/clipboard/android')
+project(':capacitor-clipboard').projectDir = new File('../../../node_modules/.pnpm/@capacitor+clipboard@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/clipboard/android')

 include ':capacitor-device'
-project(':capacitor-device').projectDir = new File('../../../node_modules/.pnpm/@capacitor+device@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/device/android')
+project(':capacitor-device').projectDir = new File('../../../node_modules/.pnpm/@capacitor+device@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/device/android')

 include ':capacitor-dialog'
-project(':capacitor-dialog').projectDir = new File('../../../node_modules/.pnpm/@capacitor+dialog@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/dialog/android')
+project(':capacitor-dialog').projectDir = new File('../../../node_modules/.pnpm/@capacitor+dialog@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/dialog/android')

 include ':capacitor-filesystem'
-project(':capacitor-filesystem').projectDir = new File('../../../node_modules/.pnpm/@capacitor+filesystem@5.2.1_@capacitor+core@5.7.3/node_modules/@capacitor/filesystem/android')
+project(':capacitor-filesystem').projectDir = new File('../../../node_modules/.pnpm/@capacitor+filesystem@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/filesystem/android')

 include ':capacitor-geolocation'
-project(':capacitor-geolocation').projectDir = new File('../../../node_modules/.pnpm/@capacitor+geolocation@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/geolocation/android')
+project(':capacitor-geolocation').projectDir = new File('../../../node_modules/.pnpm/@capacitor+geolocation@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/geolocation/android')

 include ':capacitor-haptics'
-project(':capacitor-haptics').projectDir = new File('../../../node_modules/.pnpm/@capacitor+haptics@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/haptics/android')
+project(':capacitor-haptics').projectDir = new File('../../../node_modules/.pnpm/@capacitor+haptics@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/haptics/android')

 include ':capacitor-keyboard'
-project(':capacitor-keyboard').projectDir = new File('../../../node_modules/.pnpm/@capacitor+keyboard@5.0.8_@capacitor+core@5.7.3/node_modules/@capacitor/keyboard/android')
+project(':capacitor-keyboard').projectDir = new File('../../../node_modules/.pnpm/@capacitor+keyboard@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/keyboard/android')

 include ':capacitor-local-notifications'
-project(':capacitor-local-notifications').projectDir = new File('../../../node_modules/.pnpm/@capacitor+local-notifications@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/local-notifications/android')
+project(':capacitor-local-notifications').projectDir = new File('../../../node_modules/.pnpm/@capacitor+local-notifications@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/local-notifications/android')

 include ':capacitor-network'
-project(':capacitor-network').projectDir = new File('../../../node_modules/.pnpm/@capacitor+network@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/network/android')
+project(':capacitor-network').projectDir = new File('../../../node_modules/.pnpm/@capacitor+network@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/network/android')

 include ':capacitor-preferences'
-project(':capacitor-preferences').projectDir = new File('../../../node_modules/.pnpm/@capacitor+preferences@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/preferences/android')
+project(':capacitor-preferences').projectDir = new File('../../../node_modules/.pnpm/@capacitor+preferences@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/preferences/android')

 include ':capacitor-screen-orientation'
-project(':capacitor-screen-orientation').projectDir = new File('../../../node_modules/.pnpm/@capacitor+screen-orientation@6.0.0_@capacitor+core@5.7.3/node_modules/@capacitor/screen-orientation/android')
+project(':capacitor-screen-orientation').projectDir = new File('../../../node_modules/.pnpm/@capacitor+screen-orientation@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/screen-orientation/android')

 include ':capacitor-share'
-project(':capacitor-share').projectDir = new File('../../../node_modules/.pnpm/@capacitor+share@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/share/android')
+project(':capacitor-share').projectDir = new File('../../../node_modules/.pnpm/@capacitor+share@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/share/android')

 include ':capacitor-splash-screen'
-project(':capacitor-splash-screen').projectDir = new File('../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/splash-screen/android')
+project(':capacitor-splash-screen').projectDir = new File('../../../node_modules/.pnpm/@capacitor+splash-screen@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/splash-screen/android')

 include ':transistorsoft-capacitor-background-fetch'
-project(':transistorsoft-capacitor-background-fetch').projectDir = new File('../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.2.0_@capacitor+core@5.7.3/node_modules/@transistorsoft/capacitor-background-fetch/android')
+project(':transistorsoft-capacitor-background-fetch').projectDir = new File('../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.2.0_@capacitor+core@6.1.1/node_modules/@transistorsoft/capacitor-background-fetch/android')

 include ':capacitor-secure-storage-plugin'
-project(':capacitor-secure-storage-plugin').projectDir = new File('../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@5.7.3/node_modules/capacitor-secure-storage-plugin/android')
+project(':capacitor-secure-storage-plugin').projectDir = new File('../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@6.1.1/node_modules/capacitor-secure-storage-plugin/android')
--- a/frontend/app/android/gradle/wrapper/gradle-wrapper.properties
+++ b/frontend/app/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.2.1-all.zip
 networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
--- a/frontend/app/android/variables.gradle
+++ b/frontend/app/android/variables.gradle
@@ -1,14 +1,14 @@
 ext {
    minSdkVersion = 22
-    compileSdkVersion = 33
-    targetSdkVersion = 33
-    androidxActivityVersion = '1.7.0'
+    compileSdkVersion = 34
+    targetSdkVersion = 34
+    androidxActivityVersion = '1.8.0'
    androidxAppCompatVersion = '1.6.1'
    androidxCoordinatorLayoutVersion = '1.2.0'
-    androidxCoreVersion = '1.10.0'
-    androidxFragmentVersion = '1.5.6'
-    coreSplashScreenVersion = '1.0.0'
-    androidxWebkitVersion = '1.6.1'
+    androidxCoreVersion = '1.12.0'
+    androidxFragmentVersion = '1.6.2'
+    coreSplashScreenVersion = '1.0.1'
+    androidxWebkitVersion = '1.9.0'
    junitVersion = '4.13.2'
    androidxJunitVersion = '1.1.5'
    androidxEspressoCoreVersion = '3.5.1'
--- a/frontend/app/ios/App/Podfile
+++ b/frontend/app/ios/App/Podfile
@@ -1,4 +1,4 @@
-require_relative '../../../../node_modules/.pnpm/@capacitor+ios@5.7.3_@capacitor+core@5.7.3/node_modules/@capacitor/ios/scripts/pods_helpers'
+require_relative '../../../../node_modules/.pnpm/@capacitor+ios@6.1.1_@capacitor+core@6.1.1/node_modules/@capacitor/ios/scripts/pods_helpers'

 platform :ios, '13.0'
 use_frameworks!
@@ -9,26 +9,26 @@ use_frameworks!
 install! 'cocoapods', :disable_input_output_paths => true

 def capacitor_pods
-  pod 'Capacitor', :path => '../../../../node_modules/.pnpm/@capacitor+ios@5.7.3_@capacitor+core@5.7.3/node_modules/@capacitor/ios'
-  pod 'CapacitorCordova', :path => '../../../../node_modules/.pnpm/@capacitor+ios@5.7.3_@capacitor+core@5.7.3/node_modules/@capacitor/ios'
-  pod 'CapacitorCommunityScreenBrightness', :path => '../../../../node_modules/.pnpm/@capacitor-community+screen-brightness@6.0.0_@capacitor+core@5.7.3/node_modules/@capacitor-community/screen-brightness'
-  pod 'CapacitorApp', :path => '../../../../node_modules/.pnpm/@capacitor+app@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/app'
-  pod 'CapacitorBrowser', :path => '../../../../node_modules/.pnpm/@capacitor+browser@5.2.0_@capacitor+core@5.7.3/node_modules/@capacitor/browser'
-  pod 'CapacitorClipboard', :path => '../../../../node_modules/.pnpm/@capacitor+clipboard@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/clipboard'
-  pod 'CapacitorDevice', :path => '../../../../node_modules/.pnpm/@capacitor+device@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/device'
-  pod 'CapacitorDialog', :path => '../../../../node_modules/.pnpm/@capacitor+dialog@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/dialog'
-  pod 'CapacitorFilesystem', :path => '../../../../node_modules/.pnpm/@capacitor+filesystem@5.2.1_@capacitor+core@5.7.3/node_modules/@capacitor/filesystem'
-  pod 'CapacitorGeolocation', :path => '../../../../node_modules/.pnpm/@capacitor+geolocation@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/geolocation'
-  pod 'CapacitorHaptics', :path => '../../../../node_modules/.pnpm/@capacitor+haptics@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/haptics'
-  pod 'CapacitorKeyboard', :path => '../../../../node_modules/.pnpm/@capacitor+keyboard@5.0.8_@capacitor+core@5.7.3/node_modules/@capacitor/keyboard'
-  pod 'CapacitorLocalNotifications', :path => '../../../../node_modules/.pnpm/@capacitor+local-notifications@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/local-notifications'
-  pod 'CapacitorNetwork', :path => '../../../../node_modules/.pnpm/@capacitor+network@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/network'
-  pod 'CapacitorPreferences', :path => '../../../../node_modules/.pnpm/@capacitor+preferences@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/preferences'
-  pod 'CapacitorScreenOrientation', :path => '../../../../node_modules/.pnpm/@capacitor+screen-orientation@6.0.0_@capacitor+core@5.7.3/node_modules/@capacitor/screen-orientation'
-  pod 'CapacitorShare', :path => '../../../../node_modules/.pnpm/@capacitor+share@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/share'
-  pod 'CapacitorSplashScreen', :path => '../../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/splash-screen'
-  pod 'TransistorsoftCapacitorBackgroundFetch', :path => '../../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.2.0_@capacitor+core@5.7.3/node_modules/@transistorsoft/capacitor-background-fetch'
-  pod 'CapacitorSecureStoragePlugin', :path => '../../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@5.7.3/node_modules/capacitor-secure-storage-plugin'
+  pod 'Capacitor', :path => '../../../../node_modules/.pnpm/@capacitor+ios@6.1.1_@capacitor+core@6.1.1/node_modules/@capacitor/ios'
+  pod 'CapacitorCordova', :path => '../../../../node_modules/.pnpm/@capacitor+ios@6.1.1_@capacitor+core@6.1.1/node_modules/@capacitor/ios'
+  pod 'CapacitorCommunityScreenBrightness', :path => '../../../../node_modules/.pnpm/@capacitor-community+screen-brightness@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor-community/screen-brightness'
+  pod 'CapacitorApp', :path => '../../../../node_modules/.pnpm/@capacitor+app@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/app'
+  pod 'CapacitorBrowser', :path => '../../../../node_modules/.pnpm/@capacitor+browser@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/browser'
+  pod 'CapacitorClipboard', :path => '../../../../node_modules/.pnpm/@capacitor+clipboard@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/clipboard'
+  pod 'CapacitorDevice', :path => '../../../../node_modules/.pnpm/@capacitor+device@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/device'
+  pod 'CapacitorDialog', :path => '../../../../node_modules/.pnpm/@capacitor+dialog@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/dialog'
+  pod 'CapacitorFilesystem', :path => '../../../../node_modules/.pnpm/@capacitor+filesystem@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/filesystem'
+  pod 'CapacitorGeolocation', :path => '../../../../node_modules/.pnpm/@capacitor+geolocation@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/geolocation'
+  pod 'CapacitorHaptics', :path => '../../../../node_modules/.pnpm/@capacitor+haptics@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/haptics'
+  pod 'CapacitorKeyboard', :path => '../../../../node_modules/.pnpm/@capacitor+keyboard@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/keyboard'
+  pod 'CapacitorLocalNotifications', :path => '../../../../node_modules/.pnpm/@capacitor+local-notifications@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/local-notifications'
+  pod 'CapacitorNetwork', :path => '../../../../node_modules/.pnpm/@capacitor+network@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/network'
+  pod 'CapacitorPreferences', :path => '../../../../node_modules/.pnpm/@capacitor+preferences@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/preferences'
+  pod 'CapacitorScreenOrientation', :path => '../../../../node_modules/.pnpm/@capacitor+screen-orientation@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/screen-orientation'
+  pod 'CapacitorShare', :path => '../../../../node_modules/.pnpm/@capacitor+share@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/share'
+  pod 'CapacitorSplashScreen', :path => '../../../../node_modules/.pnpm/@capacitor+splash-screen@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/splash-screen'
+  pod 'TransistorsoftCapacitorBackgroundFetch', :path => '../../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.2.0_@capacitor+core@6.1.1/node_modules/@transistorsoft/capacitor-background-fetch'
+  pod 'CapacitorSecureStoragePlugin', :path => '../../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@6.1.1/node_modules/capacitor-secure-storage-plugin'
  pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
 end

--- a/frontend/app/ios/App/Podfile.lock
+++ b/frontend/app/ios/App/Podfile.lock
@@ -1,64 +1,70 @@
 PODS:
-  - Capacitor (5.5.0):
+  - Capacitor (6.1.1):
    - CapacitorCordova
-  - CapacitorApp (5.0.6):
+  - CapacitorApp (6.0.0):
    - Capacitor
-  - CapacitorBrowser (5.1.0):
+  - CapacitorBrowser (6.0.1):
    - Capacitor
-  - CapacitorClipboard (5.0.6):
+  - CapacitorClipboard (6.0.0):
    - Capacitor
-  - CapacitorCordova (5.5.0)
-  - CapacitorDevice (5.0.6):
+  - CapacitorCommunityScreenBrightness (6.0.0):
    - Capacitor
-  - CapacitorDialog (5.0.6):
+  - CapacitorCordova (6.1.1)
+  - CapacitorDevice (6.0.0):
    - Capacitor
-  - CapacitorFilesystem (5.1.4):
+  - CapacitorDialog (6.0.0):
    - Capacitor
-  - CapacitorGeolocation (5.0.6):
+  - CapacitorFilesystem (6.0.0):
    - Capacitor
-  - CapacitorHaptics (5.0.6):
+  - CapacitorGeolocation (6.0.0):
    - Capacitor
-  - CapacitorKeyboard (5.0.6):
+  - CapacitorHaptics (6.0.0):
    - Capacitor
-  - CapacitorLocalNotifications (5.0.6):
+  - CapacitorKeyboard (6.0.1):
    - Capacitor
-  - CapacitorNetwork (5.0.6):
+  - CapacitorLocalNotifications (6.0.0):
    - Capacitor
-  - CapacitorPreferences (5.0.6):
+  - CapacitorNetwork (6.0.1):
+    - Capacitor
+  - CapacitorPreferences (6.0.1):
+    - Capacitor
+  - CapacitorScreenOrientation (6.0.1):
    - Capacitor
  - CapacitorSecureStoragePlugin (0.9.0):
    - Capacitor
    - SwiftKeychainWrapper
-  - CapacitorShare (5.0.6):
+  - CapacitorShare (6.0.1):
    - Capacitor
-  - CapacitorSplashScreen (5.0.6):
+  - CapacitorSplashScreen (6.0.1):
    - Capacitor
-  - CordovaPlugins (5.5.0):
+  - CordovaPlugins (6.1.1):
    - CapacitorCordova
  - SwiftKeychainWrapper (4.0.1)
-  - TransistorsoftCapacitorBackgroundFetch (5.1.1):
+  - TransistorsoftCapacitorBackgroundFetch (5.2.0):
    - Capacitor

 DEPENDENCIES:
-  - "Capacitor (from `../../../../node_modules/.pnpm/@capacitor+ios@5.5.0_@capacitor+core@5.5.0/node_modules/@capacitor/ios`)"
-  - "CapacitorApp (from `../../../../node_modules/.pnpm/@capacitor+app@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/app`)"
-  - "CapacitorBrowser (from `../../../../node_modules/.pnpm/@capacitor+browser@5.1.0_@capacitor+core@5.5.0/node_modules/@capacitor/browser`)"
-  - "CapacitorClipboard (from `../../../../node_modules/.pnpm/@capacitor+clipboard@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/clipboard`)"
-  - "CapacitorCordova (from `../../../../node_modules/.pnpm/@capacitor+ios@5.5.0_@capacitor+core@5.5.0/node_modules/@capacitor/ios`)"
-  - "CapacitorDevice (from `../../../../node_modules/.pnpm/@capacitor+device@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/device`)"
-  - "CapacitorDialog (from `../../../../node_modules/.pnpm/@capacitor+dialog@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/dialog`)"
-  - "CapacitorFilesystem (from `../../../../node_modules/.pnpm/@capacitor+filesystem@5.1.4_@capacitor+core@5.5.0/node_modules/@capacitor/filesystem`)"
-  - "CapacitorGeolocation (from `../../../../node_modules/.pnpm/@capacitor+geolocation@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/geolocation`)"
-  - "CapacitorHaptics (from `../../../../node_modules/.pnpm/@capacitor+haptics@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/haptics`)"
-  - "CapacitorKeyboard (from `../../../../node_modules/.pnpm/@capacitor+keyboard@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/keyboard`)"
-  - "CapacitorLocalNotifications (from `../../../../node_modules/.pnpm/@capacitor+local-notifications@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/local-notifications`)"
-  - "CapacitorNetwork (from `../../../../node_modules/.pnpm/@capacitor+network@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/network`)"
-  - "CapacitorPreferences (from `../../../../node_modules/.pnpm/@capacitor+preferences@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/preferences`)"
-  - "CapacitorSecureStoragePlugin (from `../../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@5.5.0/node_modules/capacitor-secure-storage-plugin`)"
-  - "CapacitorShare (from `../../../../node_modules/.pnpm/@capacitor+share@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/share`)"
-  - "CapacitorSplashScreen (from `../../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/splash-screen`)"
+  - "Capacitor (from `../../../../node_modules/.pnpm/@capacitor+ios@6.1.1_@capacitor+core@6.1.1/node_modules/@capacitor/ios`)"
+  - "CapacitorApp (from `../../../../node_modules/.pnpm/@capacitor+app@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/app`)"
+  - "CapacitorBrowser (from `../../../../node_modules/.pnpm/@capacitor+browser@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/browser`)"
+  - "CapacitorClipboard (from `../../../../node_modules/.pnpm/@capacitor+clipboard@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/clipboard`)"
+  - "CapacitorCommunityScreenBrightness (from `../../../../node_modules/.pnpm/@capacitor-community+screen-brightness@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor-community/screen-brightness`)"
+  - "CapacitorCordova (from `../../../../node_modules/.pnpm/@capacitor+ios@6.1.1_@capacitor+core@6.1.1/node_modules/@capacitor/ios`)"
+  - "CapacitorDevice (from `../../../../node_modules/.pnpm/@capacitor+device@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/device`)"
+  - "CapacitorDialog (from `../../../../node_modules/.pnpm/@capacitor+dialog@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/dialog`)"
+  - "CapacitorFilesystem (from `../../../../node_modules/.pnpm/@capacitor+filesystem@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/filesystem`)"
+  - "CapacitorGeolocation (from `../../../../node_modules/.pnpm/@capacitor+geolocation@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/geolocation`)"
+  - "CapacitorHaptics (from `../../../../node_modules/.pnpm/@capacitor+haptics@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/haptics`)"
+  - "CapacitorKeyboard (from `../../../../node_modules/.pnpm/@capacitor+keyboard@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/keyboard`)"
+  - "CapacitorLocalNotifications (from `../../../../node_modules/.pnpm/@capacitor+local-notifications@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/local-notifications`)"
+  - "CapacitorNetwork (from `../../../../node_modules/.pnpm/@capacitor+network@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/network`)"
+  - "CapacitorPreferences (from `../../../../node_modules/.pnpm/@capacitor+preferences@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/preferences`)"
+  - "CapacitorScreenOrientation (from `../../../../node_modules/.pnpm/@capacitor+screen-orientation@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/screen-orientation`)"
+  - "CapacitorSecureStoragePlugin (from `../../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@6.1.1/node_modules/capacitor-secure-storage-plugin`)"
+  - "CapacitorShare (from `../../../../node_modules/.pnpm/@capacitor+share@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/share`)"
+  - "CapacitorSplashScreen (from `../../../../node_modules/.pnpm/@capacitor+splash-screen@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/splash-screen`)"
  - CordovaPlugins (from `../capacitor-cordova-ios-plugins`)
-  - "TransistorsoftCapacitorBackgroundFetch (from `../../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.1.1_@capacitor+core@5.5.0/node_modules/@transistorsoft/capacitor-background-fetch`)"
+  - "TransistorsoftCapacitorBackgroundFetch (from `../../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.2.0_@capacitor+core@6.1.1/node_modules/@transistorsoft/capacitor-background-fetch`)"

 SPEC REPOS:
  trunk:
@@ -66,66 +72,72 @@ SPEC REPOS:

 EXTERNAL SOURCES:
  Capacitor:
-    :path: "../../../../node_modules/.pnpm/@capacitor+ios@5.5.0_@capacitor+core@5.5.0/node_modules/@capacitor/ios"
+    :path: "../../../../node_modules/.pnpm/@capacitor+ios@6.1.1_@capacitor+core@6.1.1/node_modules/@capacitor/ios"
  CapacitorApp:
-    :path: "../../../../node_modules/.pnpm/@capacitor+app@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/app"
+    :path: "../../../../node_modules/.pnpm/@capacitor+app@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/app"
  CapacitorBrowser:
-    :path: "../../../../node_modules/.pnpm/@capacitor+browser@5.1.0_@capacitor+core@5.5.0/node_modules/@capacitor/browser"
+    :path: "../../../../node_modules/.pnpm/@capacitor+browser@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/browser"
  CapacitorClipboard:
-    :path: "../../../../node_modules/.pnpm/@capacitor+clipboard@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/clipboard"
+    :path: "../../../../node_modules/.pnpm/@capacitor+clipboard@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/clipboard"
+  CapacitorCommunityScreenBrightness:
+    :path: "../../../../node_modules/.pnpm/@capacitor-community+screen-brightness@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor-community/screen-brightness"
  CapacitorCordova:
-    :path: "../../../../node_modules/.pnpm/@capacitor+ios@5.5.0_@capacitor+core@5.5.0/node_modules/@capacitor/ios"
+    :path: "../../../../node_modules/.pnpm/@capacitor+ios@6.1.1_@capacitor+core@6.1.1/node_modules/@capacitor/ios"
  CapacitorDevice:
-    :path: "../../../../node_modules/.pnpm/@capacitor+device@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/device"
+    :path: "../../../../node_modules/.pnpm/@capacitor+device@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/device"
  CapacitorDialog:
-    :path: "../../../../node_modules/.pnpm/@capacitor+dialog@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/dialog"
+    :path: "../../../../node_modules/.pnpm/@capacitor+dialog@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/dialog"
  CapacitorFilesystem:
-    :path: "../../../../node_modules/.pnpm/@capacitor+filesystem@5.1.4_@capacitor+core@5.5.0/node_modules/@capacitor/filesystem"
+    :path: "../../../../node_modules/.pnpm/@capacitor+filesystem@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/filesystem"
  CapacitorGeolocation:
-    :path: "../../../../node_modules/.pnpm/@capacitor+geolocation@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/geolocation"
+    :path: "../../../../node_modules/.pnpm/@capacitor+geolocation@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/geolocation"
  CapacitorHaptics:
-    :path: "../../../../node_modules/.pnpm/@capacitor+haptics@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/haptics"
+    :path: "../../../../node_modules/.pnpm/@capacitor+haptics@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/haptics"
  CapacitorKeyboard:
-    :path: "../../../../node_modules/.pnpm/@capacitor+keyboard@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/keyboard"
+    :path: "../../../../node_modules/.pnpm/@capacitor+keyboard@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/keyboard"
  CapacitorLocalNotifications:
-    :path: "../../../../node_modules/.pnpm/@capacitor+local-notifications@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/local-notifications"
+    :path: "../../../../node_modules/.pnpm/@capacitor+local-notifications@6.0.0_@capacitor+core@6.1.1/node_modules/@capacitor/local-notifications"
  CapacitorNetwork:
-    :path: "../../../../node_modules/.pnpm/@capacitor+network@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/network"
+    :path: "../../../../node_modules/.pnpm/@capacitor+network@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/network"
  CapacitorPreferences:
-    :path: "../../../../node_modules/.pnpm/@capacitor+preferences@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/preferences"
+    :path: "../../../../node_modules/.pnpm/@capacitor+preferences@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/preferences"
+  CapacitorScreenOrientation:
+    :path: "../../../../node_modules/.pnpm/@capacitor+screen-orientation@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/screen-orientation"
  CapacitorSecureStoragePlugin:
-    :path: "../../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@5.5.0/node_modules/capacitor-secure-storage-plugin"
+    :path: "../../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@6.1.1/node_modules/capacitor-secure-storage-plugin"
  CapacitorShare:
-    :path: "../../../../node_modules/.pnpm/@capacitor+share@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/share"
+    :path: "../../../../node_modules/.pnpm/@capacitor+share@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/share"
  CapacitorSplashScreen:
-    :path: "../../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/splash-screen"
+    :path: "../../../../node_modules/.pnpm/@capacitor+splash-screen@6.0.1_@capacitor+core@6.1.1/node_modules/@capacitor/splash-screen"
  CordovaPlugins:
    :path: "../capacitor-cordova-ios-plugins"
  TransistorsoftCapacitorBackgroundFetch:
-    :path: "../../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.1.1_@capacitor+core@5.5.0/node_modules/@transistorsoft/capacitor-background-fetch"
+    :path: "../../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.2.0_@capacitor+core@6.1.1/node_modules/@transistorsoft/capacitor-background-fetch"

 SPEC CHECKSUMS:
-  Capacitor: 57890b363df14d5d2d5d8461aa23e886cb34da2a
-  CapacitorApp: 024e1b1bea5f883d79f6330d309bc441c88ad04a
-  CapacitorBrowser: 7a0fb6a1011abfaaf2dfedfd8248f942a8eda3d6
-  CapacitorClipboard: 77edf49827ea21da2a9c05c690a4a6a4d07199c4
-  CapacitorCordova: 3d3908a3d208a11a75f9df3b18c4405c4de76e1d
-  CapacitorDevice: 2c968f98a1ec4d22357418c1521e7ddc46c675e6
-  CapacitorDialog: 0f3c15dfe9414b83bc64aef4078f1b92bcfead26
-  CapacitorFilesystem: af704badfbc69f6f8623d9ed313e5490e3723dcb
-  CapacitorGeolocation: 7be5f77abc205c0efe319fff8587a7183e7b0240
-  CapacitorHaptics: 1fffc1217c7e64a472d7845be50fb0c2f7d4204c
-  CapacitorKeyboard: b978154b024a5f65e044908e37d15b7de58b9d12
-  CapacitorLocalNotifications: c2d8b14794064fd4814b1d6c4ddbac8029afa295
-  CapacitorNetwork: d80b3e79bef6ec37640ee2806c19771f07ff2d0c
-  CapacitorPreferences: f03954bcb0ff09c792909e46bff88e3183c16b10
+  Capacitor: 8941aba4364ba9d1b22188569001f2ce45cc2b00
+  CapacitorApp: 9d53aec7101f7b030a950c5bdc4df8612576b279
+  CapacitorBrowser: 473c7fd70ddbe541608ff09ec1be14da0078279e
+  CapacitorClipboard: 80282f684154124b9019ebf401235b70b0cf4994
+  CapacitorCommunityScreenBrightness: 250184917bd0738a681c026a9513e18ddb0cb49b
+  CapacitorCordova: 8f2cc8d8d3619c566e9418fe8772064a94266106
+  CapacitorDevice: f8fd88f9edd1261c55a109f32015b09bbbfdc4a0
+  CapacitorDialog: 64aa82840ee5e9c066f9e1a49c1e186afd3f24d2
+  CapacitorFilesystem: 60e59ba274c234a979e7a3be2552feaadcee4263
+  CapacitorGeolocation: 1f12bbe372b65116e851bd8e3a94cf0ef9bacebb
+  CapacitorHaptics: 9ebc9363f0e9b8eb4295088a0b474530acf1859b
+  CapacitorKeyboard: 5f32a712adf41e07a61caafb82cf29fb6d8ba123
+  CapacitorLocalNotifications: 4ab68f0be5f697a579558fadd307d823a9ec1c26
+  CapacitorNetwork: 5c94acfdddc22043f2ffaff224ce9b4aa5a179f0
+  CapacitorPreferences: 72909b165bc7807103778ddbb86d5d8ce06abf71
+  CapacitorScreenOrientation: 3d4965dcbda5d901b6a48350a5d270ad7d404e05
  CapacitorSecureStoragePlugin: e91d7df060f2495a1acff9583641a6953e3aacba
-  CapacitorShare: cd41743331cb71d217c029de54b681cbd91e0fcc
-  CapacitorSplashScreen: 5fa2ab5e46cf5cc530cf16a51c80c7a986579ccd
-  CordovaPlugins: de5669381702d76ed5b1d442177a6a5fc3252a9d
+  CapacitorShare: 02222f2457ff003e642370a9c1ecd101baaa27c8
+  CapacitorSplashScreen: 61645214e8f955ff2b80f16a6a3648960fe4c89f
+  CordovaPlugins: 1078156cfc354dd440b38ce4062e69fd9b07033c
  SwiftKeychainWrapper: 807ba1d63c33a7d0613288512399cd1eda1e470c
-  TransistorsoftCapacitorBackgroundFetch: ce4b3e01b898cef516e68485d2160a078016ee97
+  TransistorsoftCapacitorBackgroundFetch: f130c5dcb6048401e74cc531e691e1d513045366

-PODFILE CHECKSUM: 229278f2c257e8ab555325c7115b2e187e8e628d
+PODFILE CHECKSUM: d0561b89b66368df409c77587e3e02b48e737203

-COCOAPODS: 1.13.0
+COCOAPODS: 1.15.2
--- a/frontend/app/package.json
+++ b/frontend/app/package.json
@@ -62,26 +62,27 @@
    "@awesome-cordova-plugins/calendar": "6.6.0",
    "@awesome-cordova-plugins/core": "6.6.0",
    "@capacitor-community/screen-brightness": "6.0.0",
-    "@capacitor/app": "5.0.7",
-    "@capacitor/browser": "5.2.0",
-    "@capacitor/clipboard": "5.0.7",
-    "@capacitor/core": "5.7.3",
-    "@capacitor/device": "5.0.7",
-    "@capacitor/dialog": "5.0.7",
-    "@capacitor/filesystem": "5.2.1",
-    "@capacitor/geolocation": "5.0.7",
-    "@capacitor/haptics": "5.0.7",
-    "@capacitor/keyboard": "5.0.8",
-    "@capacitor/local-notifications": "5.0.7",
-    "@capacitor/network": "5.0.7",
-    "@capacitor/preferences": "5.0.7",
-    "@capacitor/screen-orientation": "6.0.0",
-    "@capacitor/share": "5.0.7",
-    "@capacitor/splash-screen": "5.0.7",
+    "@capacitor/app": "6.0.0",
+    "@capacitor/browser": "6.0.1",
+    "@capacitor/clipboard": "6.0.0",
+    "@capacitor/core": "6.1.1",
+    "@capacitor/device": "6.0.0",
+    "@capacitor/dialog": "6.0.0",
+    "@capacitor/filesystem": "6.0.0",
+    "@capacitor/geolocation": "6.0.0",
+    "@capacitor/haptics": "6.0.0",
+    "@capacitor/keyboard": "6.0.1",
+    "@capacitor/local-notifications": "6.0.0",
+    "@capacitor/network": "6.0.1",
+    "@capacitor/preferences": "6.0.1",
+    "@capacitor/screen-orientation": "6.0.1",
+    "@capacitor/share": "6.0.1",
+    "@capacitor/splash-screen": "6.0.1",
    "@ionic-native/core": "5.36.0",
    "@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",
@@ -129,10 +130,10 @@
    "@angular/language-server": "17.3.0",
    "@angular/language-service": "17.3.0",
    "@angular/platform-browser-dynamic": "17.3.0",
-    "@capacitor/android": "5.7.3",
+    "@capacitor/android": "6.1.1",
    "@capacitor/assets": "3.0.4",
-    "@capacitor/cli": "5.7.3",
-    "@capacitor/ios": "5.7.3",
+    "@capacitor/cli": "6.1.1",
+    "@capacitor/ios": "6.1.1",
    "@compodoc/compodoc": "1.1.23",
    "@cypress/schematic": "2.5.1",
    "@ionic/angular-toolkit": "11.0.1",
--- a/frontend/app/src/app/app.module.ts
+++ b/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,
    },
--- a/frontend/app/src/app/modules/config/config.provider.spec.ts
+++ b/frontend/app/src/app/modules/config/config.provider.spec.ts
@@ -67,7 +67,8 @@ describe('ConfigProvider', () => {

  it('should fetch app configuration', async () => {
    spyOn(configProvider.client, 'handshake').and.returnValue(Promise.resolve(sampleIndexResponse));
-    const result = await configProvider.fetch();
+    await configProvider.fetch();
+    const result = configProvider.config;
    expect(result).toEqual(sampleIndexResponse);
  });

@@ -110,7 +111,7 @@ describe('ConfigProvider', () => {
    expect(storageProviderSpy.has).toHaveBeenCalled();
    expect(storageProviderSpy.get).toHaveBeenCalledTimes(0);
    expect(configProvider.client.handshake).toHaveBeenCalled();
-    expect(await configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
+    expect(configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
  });

  it('should throw error on failed initialisation', async () => {
@@ -192,4 +193,31 @@ describe('ConfigProvider', () => {

    expect(configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
  });
+
+  it('should fetch new config from remote on init', async () => {
+    storageProviderSpy.has.and.returnValue(Promise.resolve(true));
+    storageProviderSpy.get.and.returnValue(Promise.resolve(sampleIndexResponse));
+    spyOn(configProvider, 'fetch');
+    await configProvider.init();
+
+    expect(configProvider.fetch).toHaveBeenCalled();
+  });
+
+  it('should update the local config with the one from remote', async () => {
+    storageProviderSpy.has.and.returnValue(Promise.resolve(true));
+    storageProviderSpy.get.and.returnValue(Promise.resolve(sampleIndexResponse));
+    const newConfig = structuredClone(sampleIndexResponse);
+    newConfig.app.name = 'New app name';
+    spyOn(configProvider.client, 'handshake').and.returnValue(Promise.resolve(newConfig));
+    await configProvider.init();
+
+    // Validate that the initial configuration is loaded
+    expect(configProvider.getValue('name')).toEqual(sampleIndexResponse.app.name);
+
+    // Fetch the new configuration from the remote
+    await configProvider.fetch();
+
+    // Validate that the new configuration is now set
+    expect(configProvider.getValue('name')).toEqual(newConfig.app.name);
+  });
 });
--- a/frontend/app/src/app/modules/config/config.provider.ts
+++ b/frontend/app/src/app/modules/config/config.provider.ts
@@ -83,17 +83,20 @@ export class ConfigProvider {
  /**
   * Fetches configuration from backend
   */
-  async fetch(): Promise<SCIndexResponse> {
+  async fetch(): Promise<void> {
    try {
      const isOffline = await firstValueFrom(this.internetConnectionService.offline$);
      if (isOffline) {
        throw new Error('Device is offline.');
      } else {
-        return await this.client.handshake(this.scVersion);
+        const fetchedConfig: SCIndexResponse = await this.client.handshake(this.scVersion);
+        await this.set(fetchedConfig);
+        this.logger.log(`Configuration updated from remote`);
      }
    } catch (error) {
      const error_ = error instanceof Error ? new ConfigFetchError(error.message) : new ConfigFetchError();
-      throw error_;
+      this.logger.warn(`Failed to fetch remote configuration:`, error_);
+      throw error_; // Rethrow the error to handle it in init()
    }
  }

@@ -121,40 +124,33 @@ export class ConfigProvider {

  /**
   * Initialises the ConfigProvider
-   * @throws ConfigInitError if no configuration could be loaded.
-   * @throws WrongConfigVersionInStorage if fetch failed and saved config has wrong SCVersion
+   * @throws ConfigInitError if no configuration could be loaded both locally and remote.
   */
  async init(): Promise<void> {
-    let loadError;
-    let fetchError;
-    // load saved configuration
    try {
+      // Attempt to load the configuration from local storage
      this.config = await this.loadLocal();
      this.firstSession = false;
      this.logger.log(`initialised configuration from storage`);
+
+      // Check if the stored configuration has the correct version
      if (this.config.backend.SCVersion.split('.')[0] !== this.scVersion.split('.')[0]) {
-        loadError = new WrongConfigVersionInStorage(this.scVersion, this.config.backend.SCVersion);
+        throw new WrongConfigVersionInStorage(this.scVersion, this.config.backend.SCVersion);
      }
-    } catch (error) {
-      loadError = error;
-    }
-    // fetch remote configuration from backend
-    try {
-      const fetchedConfig: SCIndexResponse = await this.fetch();
-      await this.set(fetchedConfig);
-      this.logger.log(`initialised configuration from remote`);
-    } catch (error) {
-      fetchError = error;
-    }
-    // check for occurred errors and throw them
-    if (loadError !== undefined && fetchError !== undefined) {
-      throw new ConfigInitError();
-    }
-    if (loadError !== undefined) {
+
+      // Fetch the remote configuration in a non-blocking manner
+      void this.fetch();
+    } catch (loadError) {
      this.logger.warn(loadError);
-    }
-    if (fetchError !== undefined) {
-      this.logger.warn(fetchError);
+
+      try {
+        // If local loading fails, immediately try to fetch the configuration from remote
+        await this.fetch();
+      } catch (fetchError) {
+        this.logger.warn(`Failed to fetch remote configuration:`, fetchError);
+        // If both local loading and remote fetching fail, throw ConfigInitError
+        throw new ConfigInitError();
+      }
    }
  }

--- a/frontend/app/src/app/modules/feedback/feedback-page.html
+++ b/frontend/app/src/app/modules/feedback/feedback-page.html
@@ -80,13 +80,12 @@
        </ion-item>
        <ion-item>
          <ion-checkbox
-            class="ion-text-wrap"
            color="primary"
            label-placement="end"
            justify="start"
            [(ngModel)]="termsAgree"
            name="termsAgree"
-            >{{ 'feedback.form.termsAgree.0' | translate }}</ion-checkbox
+            ><span class="ion-text-wrap">{{ 'feedback.form.termsAgree.0' | translate }}</span></ion-checkbox
          >
        </ion-item>
        <ion-item lines="none">
@@ -104,7 +103,9 @@
            justify="start"
            [(ngModel)]="protocolDataAgree"
            name="protocolDataAgree"
-            >{{ 'feedback.form.protocolDataAgree' | translate }}</ion-checkbox
+            ><span class="ion-text-wrap">{{
+              'feedback.form.protocolDataAgree' | translate
+            }}</span></ion-checkbox
          >
        </ion-item>
        <ion-card>
--- a/frontend/app/src/app/modules/profile/id-card.component.ts
+++ b/frontend/app/src/app/modules/profile/id-card.component.ts
@@ -2,7 +2,7 @@ import {ChangeDetectionStrategy, Component, ElementRef, Input} from '@angular/co
 import {SCIdCard} from '@openstapps/core';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {AsyncPipe, TitleCasePipe} from '@angular/common';
-import {InRangeNowPipe, ToDateRangePipe} from '../../util/in-range.pipe';
+import {IntervalIsNowPipe, ToDateIntervalPipe} from '../../util/in-range.pipe';
 import {TranslateModule} from '@ngx-translate/core';
 import {AnimationController, ModalController} from '@ionic/angular';
 import {ScreenBrightness} from '@capacitor-community/screen-brightness';
@@ -16,7 +16,14 @@ import {iosDuration, iosEasing, mdDuration, mdEasing} from 'src/app/animation/ea
  styleUrls: ['id-card.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [ThingTranslateModule, InRangeNowPipe, ToDateRangePipe, AsyncPipe, TranslateModule, TitleCasePipe],
+  imports: [
+    ThingTranslateModule,
+    IntervalIsNowPipe,
+    ToDateIntervalPipe,
+    AsyncPipe,
+    TranslateModule,
+    TitleCasePipe,
+  ],
 })
 export class IdCardComponent {
  @Input({required: true}) item: SCIdCard;
--- a/frontend/app/src/app/modules/profile/id-card.html
+++ b/frontend/app/src/app/modules/profile/id-card.html
@@ -4,6 +4,6 @@
  draggable="false"
  (click)="presentFullscreen()"
 />
-@if (item.validity && (item.validity | toDateRange | isInRangeNow | async) === false) {
+@if (item.validity && (item.validity | rangeToDateInterval | dfnsIntervalIsNow | async) === false) {
  <div class="expired">{{ 'profile.userInfo.expired' | translate | titlecase }}</div>
 }
--- a/frontend/app/src/app/util/in-range.pipe.ts
+++ b/frontend/app/src/app/util/in-range.pipe.ts
@@ -1,7 +1,7 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import {SCRange, isInRange, SCISO8601DateRange} from '@openstapps/core';
-import {merge, Observable, timer} from 'rxjs';
-import {distinctUntilChanged, map, startWith} from 'rxjs/operators';
+import {NormalizedInterval, differenceInMilliseconds, interval, isEqual} from 'date-fns';
+import {EMPTY, Observable, SchedulerLike, asyncScheduler, concat, defer, map, of, timer} from 'rxjs';

@Pipe({
  name: 'isInRange',
@@ -14,28 +14,49 @@ export class InRangePipe implements PipeTransform {
  }
 }

+export const MIN_DATE = new Date(0);
+export const MAX_DATE = new Date(1e15);
+
@Pipe({
-  name: 'toDateRange',
+  name: 'rangeToDateInterval',
  pure: true,
  standalone: true,
 })
-export class ToDateRangePipe implements PipeTransform {
-  transform(value: SCISO8601DateRange): SCRange<Date> {
-    return Object.fromEntries(Object.entries(value).map(([key, value]) => [key, new Date(value)]));
+export class ToDateIntervalPipe implements PipeTransform {
+  transform(value: SCISO8601DateRange): NormalizedInterval {
+    return interval(new Date(value.gte ?? value.gt ?? MIN_DATE), new Date(value.lte ?? value.lt ?? MAX_DATE));
  }
 }

+/**
+ * Returns an Observable that will change its value when the current date is within the given interval.
+ */
+export function isWithinIntervalObservable(
+  value: NormalizedInterval,
+  scheduler: SchedulerLike = asyncScheduler,
+): Observable<boolean> {
+  return defer(() => {
+    const now = scheduler.now();
+    const activate = differenceInMilliseconds(value.start, now);
+    const deactivate = differenceInMilliseconds(value.end, now);
+
+    return concat(
+      of(activate <= 0 && deactivate > 0),
+      activate <= 0 ? EMPTY : timer(value.start, scheduler).pipe(map(() => true)),
+      isEqual(value.end, MAX_DATE) || deactivate <= 0
+        ? EMPTY
+        : timer(value.end, scheduler).pipe(map(() => false)),
+    );
+  });
+}
+
@Pipe({
-  name: 'isInRangeNow',
+  name: 'dfnsIntervalIsNow',
  pure: true,
  standalone: true,
 })
-export class InRangeNowPipe implements PipeTransform {
-  transform(value: SCRange<Date>): Observable<boolean> {
-    return merge(timer(value.lte || value.lt || 0), timer(value.gte || value.gt || 0)).pipe(
-      startWith(0),
-      map(() => isInRange(new Date(), value)),
-      distinctUntilChanged(),
-    );
+export class IntervalIsNowPipe implements PipeTransform {
+  transform(value: NormalizedInterval): Observable<boolean> {
+    return isWithinIntervalObservable(value);
  }
 }
--- a/frontend/app/src/app/util/in-range.spec.ts
+++ b/frontend/app/src/app/util/in-range.spec.ts
@@ -0,0 +1,42 @@
+import {TestScheduler} from 'rxjs/testing';
+import {MAX_DATE, MIN_DATE, isWithinIntervalObservable} from './in-range.pipe';
+import {interval} from 'date-fns';
+
+/**
+ * Test macro
+ */
+function test(range: [number | undefined, number | undefined], subscribe: string, expected: string) {
+  const testScheduler = new TestScheduler((actual, expected) => {
+    expect(actual).withContext(actual.map(JSON.stringify).join('\n')).toEqual(expected);
+  });
+
+  it(`should emit "${expected}" when "${subscribe}" for range ${range[0] ?? ''}..${range[1] ?? ''}`, () => {
+    testScheduler.run(({expectObservable}) => {
+      expectObservable(
+        isWithinIntervalObservable(
+          interval(new Date(range[0] ?? MIN_DATE), new Date(range[1] ?? MAX_DATE)),
+          testScheduler,
+        ),
+        subscribe,
+      ).toBe(expected, {t: true, f: false});
+    });
+  });
+}
+
+describe('isWithinIntervalObservable', () => {
+  test([500, undefined], '1s ^', '1s (t|)');
+  test([1000, undefined], '500ms ^', '500ms f 499ms (t|)');
+
+  test([undefined, 500], '1s ^', '1s (f|)');
+  test([undefined, 1000], '500ms ^', '500ms t 499ms (f|)');
+
+  test([1000, 2000], '500ms ^', '500ms f 499ms t 999ms (f|)');
+
+  test([500, 1000], '1500ms ^', '1500ms (f|)');
+  test([500, 1000], '1s ^', '1000ms (f|)');
+  test([500, 1000], '999ms ^', '999ms t (f|)');
+  test([500, 1000], '500ms ^', '500ms t 499ms (f|)');
+  test([500, 1000], '499ms ^', '499ms f t 499ms (f|)');
+
+  test([500, 1000], '^ 750ms !', 'f 499ms t');
+});
--- a/frontend/app/src/app/util/media-query.pipe.ts
+++ b/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);
  }
 }
--- a/frontend/app/src/app/util/rxjs/from-media-query.ts
+++ b/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(),
+    ),
+  );
+}
--- a/frontend/app/src/app/util/theme-ionic-utils.ts
+++ b/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);
+  }
+}
--- a/frontend/app/src/app/util/theme-types.ts
+++ b/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;
+  };
+}
--- a/frontend/app/src/app/util/theme-utils.ts
+++ b/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,
+    },
+  };
+}
--- a/frontend/app/src/app/util/theme.provider.ts
+++ b/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);
+      });
+  }
+}
--- a/frontend/app/src/theme/colors.scss
+++ b/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);
--- a/frontend/app/src/theme/util/_color-system.scss
+++ b/frontend/app/src/theme/util/_color-system.scss
@@ -18,15 +18,15 @@
@import './dark';

@function to-rgb($color) {
-  @return red($color) + ',' + green($color) + ',' + blue($color);
+  @return color.red($color) + ',' + color.green($color) + ',' + color.blue($color);
 }

@function to-shade($color) {
-  @return darken($color, $shade-amount);
+  @return color.adjust($color, $lightness: -$shade-amount);
 }

@function to-tint($color) {
-  @return lighten($color, $tint-amount);
+  @return color.adjust($color, $lightness: $tint-amount);
 }

@function to-contrast($color) {
@@ -35,7 +35,11 @@
 }

@function fade($color, $amount) {
-  @return if(lightness($color) > $fade-threshold, darken($color, $amount), lighten($color, $amount));
+  @return if(
+    color.lightness($color) > $fade-threshold,
+    color.adjust($color, $lightness: -$amount),
+    color.adjust($color, $lightness: $amount)
+  );
 }

@function map-range($value, $input-min, $input-max, $output-min, $output-max) {
@@ -44,9 +48,9 @@

@function interpolate-colors($from, $to, $progress, $progress-min: 0, $progress-max: 100) {
  @return rgb(
-    map-range($progress, $progress-min, $progress-max, red($from), red($to)),
-    map-range($progress, $progress-min, $progress-max, green($from), green($to)),
-    map-range($progress, $progress-min, $progress-max, blue($from), blue($to))
+    map-range($progress, $progress-min, $progress-max, color.red($from), color.red($to)),
+    map-range($progress, $progress-min, $progress-max, color.green($from), color.green($to)),
+    map-range($progress, $progress-min, $progress-max, color.blue($from), color.blue($to))
  );
 }

--- a/images/app-builder/Dockerfile
+++ b/images/app-builder/Dockerfile
@@ -6,8 +6,8 @@ LABEL version="2.0.0" \
  maintainer="Jovan Krunić <krunic@uni-frankfurt.de>"

 ### Configure versions to install
-ENV	ANDROID_APIS="android-33" \
-  ANDROID_BUILD_TOOLS_VERSION="30.0.2" \
+ENV	ANDROID_APIS="android-34" \
+  ANDROID_BUILD_TOOLS_VERSION="34.0.0" \
  NPM_VERSION="^10.0.0" \
  IONIC_VERSION="^6.0.0" \
  CORDOVA_RES_VERSION="latest" \
--- a/package.json
+++ b/package.json
@@ -2,8 +2,8 @@
  "name": "@openstapps/openstapps",
  "private": true,
  "engines": {
-    "node": ">=18.16",
-    "pnpm": ">=8"
+    "node": "^18.19.1",
+    "pnpm": "^8.15.4"
  },
  "scripts": {
    "build": "dotenv -c -- turbo run build",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Thea Schöbl	1636f5d259	feat: new color system	2024-10-02 13:01:56 +02:00
Jovan Krunić	bb1f596bfc	fix: enable starting the app without backend Closes #223	2024-09-30 11:03:53 +00:00
Thea Schöbl	0c49fd8c34	refactor: update nix dependencies	2024-09-30 13:00:59 +02:00
Thea Schöbl	ce5016a992	fix: text of the feedback form not fully visible Closes #227	2024-09-18 09:53:50 +00:00
Thea Schöbl	3ac8c04765	fix: date range is now pipe has issues around boundaries	2024-08-06 17:43:59 +02:00
Rainer Killinger	5c260dd26b	refactor: update android build dependencies for API level 34	2024-08-05 12:51:47 +00:00