diff --git a/lib/templates/email/bodyBegin.html b/lib/templates/email/bodyBegin.html
index 86b4f67..65bed99 100644
--- a/lib/templates/email/bodyBegin.html
+++ b/lib/templates/email/bodyBegin.html
@@ -1,5 +1,5 @@
 <!-- Start bodyBegin -->
-    <table cellpadding="0" cellspacing="0" border="0" width="100%%" bgcolor="#F2F5F8" style="width:100%%;border-radius:8px 8px 8px 8px;border-spacing:0;background-color:#F2F5F8" >
+    <table cellpadding="0" cellspacing="0" border="0" width="100%%" style="width:100%%;border-radius:8px 8px 8px 8px;border-spacing:0;background-color:var(--ion-color-cool-grey-c1)" >
         <tr valign="top" >
             <td align="left" >
                 <table cellpadding="0" cellspacing="0" border="0" width="100%%" >
diff --git a/lib/templates/email/bodyEnd.html b/lib/templates/email/bodyEnd.html
index 64ddfe7..230489e 100644
--- a/lib/templates/email/bodyEnd.html
+++ b/lib/templates/email/bodyEnd.html
@@ -1,6 +1,6 @@
 <!-- Start bodyEnd -->
                             <p class="footer-greeting" style="padding:0 0 0 0;margin:0;text-align:left;line-height:20px" >
-                                <font class="footer-font" style="font-family:\'Open Sans\', \'Google Sans\', Arial, sans-serif;font-size:15px;font-weight:normal;color:#465A75;line-height:20px" ><?= $l->t('Best regards')?><br/>IONOS SE<br/></font>
+                                <font class="footer-font" style="font-family:'Open Sans', 'Google Sans', Arial, sans-serif;font-size:15px;font-weight:normal;color:var(--ion-color-cool-grey-c6);line-height:20px" ><?= $l->t('Best regards')?><br/>IONOS SE<br/></font>
                             </p>
                         </td>
                         <td width="20" style="min-width:20px;width:20px;line-height:1px;font-size:0px" >
diff --git a/lib/templates/email/bodyText.html b/lib/templates/email/bodyText.html
index 4f01c61..5681251 100644
--- a/lib/templates/email/bodyText.html
+++ b/lib/templates/email/bodyText.html
@@ -1,6 +1,6 @@
 <!-- Start bodyText-->
     <p class="body-text" style="padding:0 0 0 0;margin:0;text-align:left;line-height:20px" >
-        <font class="body-font" style="font-family:\'Open Sans\', \'Google Sans\', Arial, sans-serif;font-size:15px;font-weight:normal;color:#465A75;line-height:20px" >
+        <font class="body-font" style="font-family:'Open Sans', 'Google Sans', Arial, sans-serif;font-size:15px;font-weight:normal;color:var(--ion-color-cool-grey-c6);line-height:20px" >
             %s
         </font>
     </p>
diff --git a/lib/templates/email/button.html b/lib/templates/email/button.html
index 9d3a09b..5c67262 100644
--- a/lib/templates/email/button.html
+++ b/lib/templates/email/button.html
@@ -2,7 +2,7 @@
     <table cellpadding="0" cellspacing="0" border="0" name="halign" width="100%%" style="width:100%%;border-spacing:0" >
         <tr valign="top" >
             <td align="center" >
-                <a href="%3$s" class="button" target="_blank" style="background-color: rgb(17, 199, 230);border: 2px solid rgb(17, 199, 230);border-radius: 40px;box-sizing: border-box;color: rgb(11, 42, 99);cursor: pointer;display: inline-grid;font-size: 12px;font-weight: 600;height: 36px;line-height: 20px;padding: 6px 12px;text-align: center;text-decoration: none;">
+                <a href="%3$s" class="button" target="_blank" style="background-color: var(--ion-color-sky-s3);border: 2px solid var(--ion-color-sky-s3);border-radius: 40px;box-sizing: border-box;color: var(--ion-color-blue-b7);cursor: pointer;display: inline-grid;font-size: 12px;font-weight: 600;height: 36px;line-height: 20px;padding: 6px 12px;text-align: center;text-decoration: none;">
                     %7$s
                 </a>
             </td>
diff --git a/lib/templates/email/buttonGroup.html b/lib/templates/email/buttonGroup.html
index 6c675de..0a1c49a 100644
--- a/lib/templates/email/buttonGroup.html
+++ b/lib/templates/email/buttonGroup.html
@@ -2,12 +2,12 @@
     <table cellpadding="0" cellspacing="0" border="0" name="halign" width="100%%" style="width:100%%;border-spacing:0" >
         <tr valign="top" >
             <td align="center" >
-                <a href="%3$s" class="button" target="_blank" style="background-color: rgb(17, 199, 230);border: 2px solid rgb(17, 199, 230);border-radius: 40px;box-sizing: border-box;color: rgb(11, 42, 99);cursor: pointer;display: inline-grid;font-size: 12px;font-weight: 600;height: 36px;line-height: 20px;padding: 6px 12px;text-align: center;text-decoration: none;">
+                <a href="%3$s" class="button" target="_blank" style="background-color: var(--ion-color-sky-s3);border: 2px solid var(--ion-color-sky-s3);border-radius: 40px;box-sizing: border-box;color: var(--ion-color-blue-b7);cursor: pointer;display: inline-grid;font-size: 12px;font-weight: 600;height: 36px;line-height: 20px;padding: 6px 12px;text-align: center;text-decoration: none;">
                     %7$s
                 </a>
             </td>
             <td align="center" >
-                <a href="%8$s" class="button" target="_blank" style="background-color: rgb(17, 199, 230);border: 2px solid rgb(17, 199, 230);border-radius: 40px;box-sizing: border-box;color: rgb(11, 42, 99);cursor: pointer;display: inline-grid;font-size: 12px;font-weight: 600;height: 36px;line-height: 20px;padding: 6px 12px;text-align: center;text-decoration: none;">
+                <a href="%8$s" class="button" target="_blank" style="background-color: var(--ion-color-sky-s3);border: 2px solid var(--ion-color-sky-s3);border-radius: 40px;box-sizing: border-box;color: var(--ion-color-blue-b7);cursor: pointer;display: inline-grid;font-size: 12px;font-weight: 600;height: 36px;line-height: 20px;padding: 6px 12px;text-align: center;text-decoration: none;">
                     %9$s
                 </a>
             </td>
diff --git a/lib/templates/email/footer.html b/lib/templates/email/footer.html
index 4b46387..6515fa5 100644
--- a/lib/templates/email/footer.html
+++ b/lib/templates/email/footer.html
@@ -1,5 +1,5 @@
 <!-- Start footer -->
-<table cellpadding="0" cellspacing="0" border="0" width="100%%" bgcolor="#F2F5F8" style="width:100%%;border-radius:8px 8px 8px 8px;border-spacing:0;background-color:#F2F5F8" >
+<table cellpadding="0" cellspacing="0" border="0" width="100%%" style="width:100%%;border-radius:8px 8px 8px 8px;border-spacing:0;background-color:var(--ion-color-cool-grey-c1)" >
         <tr valign="top" >
             <td align="left" >
                 <table cellpadding="0" cellspacing="0" border="0" style="border-spacing:0" >
@@ -23,14 +23,14 @@
                         </td>
                         <td align="left" >
                             <p class="footer-address" style="padding:0 0 0 0;margin:0;text-align:left;line-height:18px" >
-                                <font class="footer-address-font" style="font-family:\'Open Sans\', \'Google Sans\', Arial, sans-serif;font-size:14px;font-weight:normal;color:#465A75;line-height:18px" >IONOS SE
+                                <font class="footer-address-font" style="font-family:'Open Sans', 'Google Sans', Arial, sans-serif;font-size:14px;font-weight:normal;color:var(--ion-color-cool-grey-c6);line-height:18px" >IONOS SE
                                     <br/>Elgendorfer Straße 57
                                     <br/>56410 Montabaur
                                     <br/><?= $l->t('Germany')?>
                                 </font>
                             </p>
                             <p>
-                                <a href="https://ionos.eu" class="footer-link" style="font-family:\'Open Sans\', \'Google Sans\', Arial, sans-serif;font-size:14px;font-weight:normal;color:#465A75;line-height:18px" target="_blank"><?= $l->t('Further information')?></a>
+                                <a href="https://ionos.eu" class="footer-link" style="font-family:'Open Sans', 'Google Sans', Arial, sans-serif;font-size:14px;font-weight:normal;color:var(--ion-color-cool-grey-c6);line-height:18px" target="_blank"><?= $l->t('Further information')?></a>
                             </p>
                             <table cellpadding="0" cellspacing="0" border="0" width="100%%" >
                                 <tr>
diff --git a/lib/templates/email/head.html b/lib/templates/email/head.html
index a6153c3..51d0984 100644
--- a/lib/templates/email/head.html
+++ b/lib/templates/email/head.html
@@ -74,17 +74,17 @@
                 }
             }
             .button {
-                background-color: rgb(17, 199, 230);
-                border: 2px solid rgb(17, 199, 230);
+                background-color: var(--ion-color-sky-s3);
+                border: 2px solid var(--ion-color-sky-s3);
                 border-radius: 40px;
                 border-image-outset: 0;
                 border-image-repeat: stretch;
                 border-image-slice: 100%;
                 border-image-source: none;
                 border-image-width: 1;
-                box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 2px 12px 0px;
+                box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 2px 12px 0px; /* no correspondent variable to box-shadow values in theme */
                 box-sizing: border-box;
-                color: rgb(11, 42, 99);
+                color: var(--ion-color-blue-b7);
                 cursor: pointer;
                 display: inline-grid;
                 font-feature-settings: normal;
@@ -93,19 +93,19 @@
                 font-weight: 600;
                 height: 36px;
                 line-height: 20px;
-                outline-color: rgba(0, 0, 0, 0);
+                outline-color: transparent;
                 outline-offset: 2px;
                 outline-style: solid;
                 outline-width: 2px;
                 padding: 6px 12px;
                 tab-size: 4;
                 text-align: center;
-                text-decoration-color: rgb(11, 42, 99);
+                text-decoration-color: var(--ion-color-blue-b7);
                 text-decoration-line: none;
                 text-decoration-style: solid;
                 text-decoration-thickness: auto;
                 text-size-adjust: 100%;
-                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+                -webkit-tap-highlight-color: transparent;
             }
             @media all {
                 .inline-block {display:inline-block !important;}
@@ -120,14 +120,14 @@
             <xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
         <![endif]-->
     </head>
-    <body topmargin="0" rightmargin="0" leftmargin="0" style="background-color:#FFFFFF;-webkit-text-size-adjust:none;font-family:\'Open Sans\', \'Google Sans\', Arial, sans-serif;font-stretch:normal;font-style:normal;font-weight:normal;font-variant:normal;font-size:1.2rem" link="#3B9CDA" text="#465A75" vlink="#3B9CDA" alink="#3B9CDA" bgcolor="#FFFFFF">
-        <div class="body-bg" style="background-color:#FFFFFF;width:100%%" bgcolor="#FFFFFF">
+    <body topmargin="0" rightmargin="0" leftmargin="0" style="background-color:var(--ion-color-main-background);-webkit-text-size-adjust:none;font-family:'Open Sans', 'Google Sans', Arial, sans-serif;font-stretch:normal;font-style:normal;font-weight:normal;font-variant:normal;font-size:1.2rem" link="var(--ion-color-blue-b3)" text="var(--ion-color-cool-grey-c6)" vlink="var(--ion-color-blue-b3)" alink="var(--ion-color-blue-b3)" bgcolor="var(--ion-color-main-background)">
+        <div class="body-bg" style="background-color:var(--ion-color-main-background);width:100%%" bgcolor="var(--ion-color-main-background)">
             <div class="pad" style="padding-top:0px;padding-right:0px;padding-bottom:30px;padding-left:0px">
-                <!--[if mso]>
+                <!--[if mso]-->
                     <style>.nomsoffice{mso-hide:all;visibility:hidden;}</style>
                 <![endif]-->
                 <a name="nltop"></a>
                 <table class="layout-wrapper w-740 minw-740" cellpadding="0" cellspacing="0" border="0" width="740" align="center" style="width:740px;border-spacing:0" >
                     <tr valign="top" >
-                        <td class="w-740 minw-740 bg-white" width="740" align="left" bgcolor="#FFFFFF" style="background-color:#FFFFFF;min-width:740px;width:740px" >
+                        <td class="w-740 minw-740 bg-white" width="740" align="left" bgcolor="var(--ion-color-main-background)" style="background-color:var(--ion-color-main-background);min-width:740px;width:740px" >
 <!-- End head -->
diff --git a/lib/templates/email/header.html b/lib/templates/email/header.html
index c6557a3..3f80526 100644
--- a/lib/templates/email/header.html
+++ b/lib/templates/email/header.html
@@ -6,7 +6,7 @@
             </td>
         </tr>
     </table>
-    <table cellpadding="0" cellspacing="0" border="0" width="100%%" bgcolor="#003D8F" style="width:100%%;border-radius:8px 8px 8px 8px;border-spacing:0;background-color:#003D8F" >
+    <table cellpadding="0" cellspacing="0" border="0" width="100%%" style="width:100%%;border-radius:8px 8px 8px 8px;border-spacing:0;background-color:var(--ion-color-blue-b6)" >
         <tr valign="top" >
             <td align="left" >
                 <table cellpadding="0" cellspacing="0" border="0" width="100%%" >
@@ -22,7 +22,7 @@
                                 <img src="<?= $spacerUrl ?>" width="20" height="1" class="w-20 h-1" style="display:block;width:20px;height:1px;border:0" alt=" " border="0" />
                         </td>
                         <td class="w-112 minw-112 h-32 minh-32" align="left" valign="middle" height="32" style="min-width:112px;width:112px;min-height:32px;height:32px" >
-                            <img src="<?= $logoUrl ?>" border="0" title="IONOS" alt="IONOS Logo" class="w-112 h-32" width="112" height="32" style="color:#465A75;margin:0;border:0;font-size:15px;font-family:'Open Sans', 'Google Sans', Arial, sans-serif;line-height:0;display:block;width:112px;height:32px;padding:0" />
+                            <img src="<?= $logoUrl ?>" border="0" title="IONOS" alt="IONOS Logo" class="w-112 h-32" width="112" height="32" style="color:var(--ion-color-cool-grey-c6);margin:0;border:0;font-size:15px;font-family:'Open Sans', 'Google Sans', Arial, sans-serif;line-height:0;display:block;width:112px;height:32px;padding:0" />
                         </td>
                         <td class="w-10 minw-10" style="min-width:10px;width:10px;line-height:1px;font-size:0px" >
                             <img src="<?= $spacerUrl ?>" width="10" height="1" class="w-10 h-1" style="display:block;width:10px;height:1px;border:0" alt=" " border="0" />
diff --git a/lib/templates/email/heading.html b/lib/templates/email/heading.html
index 719844d..418b512 100644
--- a/lib/templates/email/heading.html
+++ b/lib/templates/email/heading.html
@@ -19,7 +19,7 @@
                                 <tr valign="top" >
                                     <td class="heading-title" align="left" >
                                         <p class="heading" style="padding:0 0 0 0;margin:0;text-align:left;line-height:33px" >
-                                            <font class="heading-font" style="font-family:\'Overpass Regular\', \'Roboto\', Arial, sans-serif;font-size:26px;font-weight:600;color:#0B2A63;line-height:33px" >
+                                            <font class="heading-font" style="font-family:'Overpass Regular', 'Roboto', Arial, sans-serif;font-size:26px;font-weight:600;color: var(--ion-color-blue-b7);line-height:33px" >
                                                 %s
                                             </font>
                                         </p>
@@ -31,7 +31,7 @@
                             <img src="<?= $spacerUrl ?>" width="20" height="1" class="w-20 h-1" style="display:block;width:20px;height:1px;border:0" alt=" " border="0" />
                         </td>
                         <td class="w-100 minw-100 h-100 minh-100" align="right" height="100" style="min-width:100px;width:100px;min-height:100px;height:100px" >
-                            <img src="<?= $emailIconUrl ?>" border="0" alt=" " class="w-100 h-100" width="100" height="100" style="color:#465A75;margin:0;border:0;font-size:15px;font-family:\'Open Sans\', \'Google Sans\', Arial, sans-serif;line-height:0;display:block;width:100px;height:100px;padding:0" />
+                            <img src="<?= $emailIconUrl ?>" border="0" alt=" " class="w-100 h-100" width="100" height="100" style="color: var(--ion-color-cool-grey-c6);margin:0;border:0;font-size:15px;font-family:'Open Sans', 'Google Sans', Arial, sans-serif;line-height:0;display:block;width:100px;height:100px;padding:0" />
                         </td>
                     </tr>
                 </table>
diff --git a/lib/templates/email/listItem.html b/lib/templates/email/listItem.html
index c555762..ab30183 100644
--- a/lib/templates/email/listItem.html
+++ b/lib/templates/email/listItem.html
@@ -2,10 +2,10 @@
     <table cellpadding="0" cellspacing="0" border="0" width="100%%" style="width:100%%;border-spacing:0">
         <tbody>
             <tr valign="top">
-                <td class="w-5 minw-5" style="min-width:5px;width:5px;line-height:1px;background-color:#3B9CDA;font-size:0px">
+                <td class="w-5 minw-5" style="min-width:5px;width:5px;line-height:1px;background-color: var(--ion-color-blue-b3);font-size:0px">
                     <img src="<?= $spacerUrl ?>" width="5" height="1" class="w-5 h-1" style="display:block;width:5px;height:1px;border:0" alt=" " border="0" />
                 </td>
-                <td align="left" bgcolor="#DBEDF8" style="background-color:#DBEDF8">
+                <td align="left" bgcolor="var(--ion-color-blue-b1)" style="background-color: var(--ion-color-blue-b1)">
                     <table cellpadding="0" cellspacing="0" border="0" width="100%%">
                         <tbody>
                             <tr>
@@ -31,7 +31,7 @@
                                 </td>
                                 <td align="left">
                                     <p style="padding:0 0 0 0;margin:0;text-align:left;line-height:20px">
-                                        <font style="font-family:\'Open Sans\', \'Google Sans\', Arial, sans-serif;font-size:15px;font-weight:normal;color:#465A75;line-height:20px" >
+                                        <font style="font-family:'Open Sans', 'Google Sans', Arial, sans-serif;font-size:15px;font-weight:normal;color: var(--ion-color-cool-grey-c6);line-height:20px" >
                                             %s
                                         </font>
                                     </p>
@@ -52,7 +52,7 @@
                         </tbody>
                     </table>
                 </td>
-                    <td width="5" style="min-width:5px;width:5px;line-height:1px;background-color:#DBEDF8;font-size:0px">
+                    <td width="5" style="min-width:5px;width:5px;line-height:1px;background-color: var(--ion-color-blue-b1);font-size:0px">
                         <img src="<?= $spacerUrl ?>" width="5" height="1" style="display:block;width:5px;height:1px;border:0" alt=" " border="0">
                     </td>
                 </tr>
diff --git a/package-lock.json b/package-lock.json
index 2b786e0..36d3c84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@nextcloud/eslint-config": "^8.4.2",
         "@nextcloud/stylelint-config": "^3.1.0",
         "@nextcloud/vite-config": "^1.5.2",
-        "vite": "^7.1.3"
+        "vite": "^7.1.7"
       },
       "engines": {
         "node": "^22.0.0",
@@ -3404,7 +3404,6 @@
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue2/-/plugin-vue2-2.3.3.tgz",
       "integrity": "sha512-qexY6+bbwY8h0AZerzUuGywNTi0cLOkbiSbggr0R3WEW95iB2hblQFyv4MAkkc2vm4gZN1cO5kzT1Kp6xlVzZw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": "^14.18.0 || >= 16.0.0"
       },
@@ -12545,11 +12544,10 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.5.tgz",
-      "integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==",
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
+      "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
diff --git a/package.json b/package.json
index 262408d..56f6a5b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,6 @@
     "@nextcloud/eslint-config": "^8.4.2",
     "@nextcloud/stylelint-config": "^3.1.0",
     "@nextcloud/vite-config": "^1.5.2",
-    "vite": "^7.1.3"
+    "vite": "^7.1.7"
   }
 }