From be2ae1394c242b1e98f2253828c3ea9153111117 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 23 Oct 2024 14:46:41 +0200
Subject: [PATCH] Fix theme color to be brandable

---
 frontend/src/assets/sass/tokens.module.scss | 8 ++++++++
 webapp/constants/manifest.js                | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/assets/sass/tokens.module.scss b/frontend/src/assets/sass/tokens.module.scss
index 3454ab690..e32b9f074 100644
--- a/frontend/src/assets/sass/tokens.module.scss
+++ b/frontend/src/assets/sass/tokens.module.scss
@@ -28,6 +28,14 @@ $color-yellow: rgb(245, 196, 0);
 $color-yellow-active: rgb(255, 206, 10);
 $color-yellow-inverse: rgb(255, 252, 240);
 
+/**
+ * @tokens Theme
+ * @presenter Color
+ */
+
+// main color in general. e.g. the color in the background of the app that is visible behind the transparent iPhone status bar to name one use case, or the current color of SVGs to name another use case
+$theme-color: $color-primary;
+
 /**
  * @tokens Color Neutral
  * @presenter Color
diff --git a/webapp/constants/manifest.js b/webapp/constants/manifest.js
index 9d05bb700..8662c509d 100644
--- a/webapp/constants/manifest.js
+++ b/webapp/constants/manifest.js
@@ -4,6 +4,6 @@ export default {
   name: APPLICATION_NAME,
   short_name: APPLICATION_SHORT_NAME,
   description: APPLICATION_DESCRIPTION,
-  theme_color: '#17b53f',
+  theme_color: '$theme-color',
   lang: 'en',
 }