diff --git a/app/Utils/HtmlEngine.php b/app/Utils/HtmlEngine.php
index abe051a35c..aa3c733389 100644
--- a/app/Utils/HtmlEngine.php
+++ b/app/Utils/HtmlEngine.php
@@ -321,6 +321,9 @@ class HtmlEngine
 
         $data['$invoiceninja.whitelabel'] = ['value' => asset('images/created-by-invoiceninja-new.png'), 'label' => ''];
 
+        $data['$primary_color'] = ['value' => $this->settings->primary_color, 'label' => ''];
+        $data['$secondary_color'] = ['value' => $this->settings->secondary_color, 'label' => ''];
+
         // $data['custom_label1']              = ['value' => '', 'label' => ctrans('texts.')];
         // $data['custom_label2']              = ['value' => '', 'label' => ctrans('texts.')];
         // $data['custom_label3']              = ['value' => '', 'label' => ctrans('texts.')];
diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html
index 8560d000c2..22bc3de01c 100644
--- a/resources/views/pdf-designs/bold.html
+++ b/resources/views/pdf-designs/bold.html
@@ -5,6 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <style id="style">
+            :root {
+                --primary-color: $primary_color;
+                --secondary-color: $secondary_color;
+            }
+
             * {
                 margin: 0;
                 padding: 0;
@@ -66,7 +71,7 @@
             }
 
             .entity-details-wrapper {
-                background-color: #35a39a;
+                background-color: var(--primary-color);
                 padding: 1rem;
             }
 
@@ -133,7 +138,7 @@
             #product-table-footer
                 > *
                 [data-element='product-table-balance-due'] {
-                color: #35a39a;
+                color: var(--primary-color);
             }
             #product-table-footer > * > :last-child {
                 text-align: right;
diff --git a/resources/views/pdf-designs/business.html b/resources/views/pdf-designs/business.html
index b75e2d489d..8c94d6ec14 100644
--- a/resources/views/pdf-designs/business.html
+++ b/resources/views/pdf-designs/business.html
@@ -5,6 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <style id="style">
+            :root {
+                --primary-color: $primary_color;
+                --secondary-color: $secondary_color;
+            }
+
             body {
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
@@ -66,7 +71,7 @@
             #client-details {
                 display: flex;
                 flex-direction: column;
-                color: #ec782f;
+                color: var(--primary-color);
             }
             #client-details > * {
                 margin-bottom: 0.5rem;
@@ -76,7 +81,7 @@
             }
 
             #entity-details {
-                background-color: #ec782f;
+                background-color: var(--primary-color);
                 padding: 0.8rem;
                 border-radius: 1rem;
                 width: 100%;
@@ -95,7 +100,7 @@
             }
             #product-table > thead {
                 text-align: left;
-                background: #394e6b;
+                background: var(--secondary-color);
             }
             #product-table > thead > tr > th {
                 padding: 1rem;
@@ -124,7 +129,7 @@
 
             [data-element='product-table-balance-due-label'],
             [data-element='product-table-balance-due'] {
-                color: #394e6b !important;
+                color: var(--secondary-color) !important;
                 font-weight: bold !important;
             }
 
diff --git a/resources/views/pdf-designs/clean.html b/resources/views/pdf-designs/clean.html
index 0d84d8e69d..25fc42f7bf 100644
--- a/resources/views/pdf-designs/clean.html
+++ b/resources/views/pdf-designs/clean.html
@@ -6,6 +6,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <style id="style">
+            :root {
+                --primary-color: $primary_color;
+                --secondary-color: $secondary_color;
+            }
+
             body {
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
@@ -34,7 +39,7 @@
                 color: #9f9f9f;
             }
             #company-details > span:first-child {
-                color: #67b1cc;
+                color: var(--primary-color);
             }
 
             #company-address {
@@ -48,7 +53,7 @@
                 margin-top: 3.5rem;
                 margin-bottom: 1rem;
                 font-weight: semibold;
-                color: #67b1cc;
+                color: var(--primary-color);
             }
 
             .client-and-entity-wrapper {
@@ -97,7 +102,7 @@
                 padding: 1rem;
             }
             #product-table > tbody > tr > td:first-child {
-                color: #67b1cc;
+                color: var(--primary-color);
             }
             #product-table > tbody > tr:nth-child(odd) {
                 background-color: #f5f5f5;
@@ -125,7 +130,7 @@
             #product-table-footer
                 > *
                 [data-element='product-table-balance-due'] {
-                color: #67b1cc;
+                color: var(--primary-color);
             }
             #product-table-footer > * > :last-child {
                 text-align: right;
diff --git a/resources/views/pdf-designs/creative.html b/resources/views/pdf-designs/creative.html
index 12afeced77..7cfd05472f 100644
--- a/resources/views/pdf-designs/creative.html
+++ b/resources/views/pdf-designs/creative.html
@@ -5,6 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <style id="style">
+            :root {
+                --primary-color: $primary_color;
+                --secondary-color: $secondary_color;
+            }
+
             * {
                 font-size: '$font-size';
             }
@@ -66,7 +71,7 @@
                 text-transform: uppercase;
             }
             .entity-label-wrapper .entity-label > *:last-child {
-                color: #b21c53;
+                color: var(--primary-color);
                 font-style: italic;
             }
             .entity-label-wrapper #entity-details {
@@ -82,7 +87,7 @@
                 min-width: 100%;
                 table-layout: fixed;
                 overflow-wrap: break-word;
-                border-top: 5px solid #b21c53;
+                border-top: 5px solid var(--primary-color);
             }
             #product-table > thead {
                 text-align: left;
@@ -117,13 +122,13 @@
                 > *
                 [data-element='product-table-balance-due'] {
                 font-weight: bold;
-                color: #b21c53;
+                color: var(--primary-color);
             }
             #product-table-footer > * > * {
                 padding-left: 1rem;
             }
             #product-table-footer > *:last-child > * {
-                border-top: 5px solid #b21c53;
+                border-top: 5px solid var(--primary-color);
                 padding-top: 1rem;
             }
             #product-table-footer > * > :last-child {
diff --git a/resources/views/pdf-designs/elegant.html b/resources/views/pdf-designs/elegant.html
index 613df3046d..748cbd1197 100644
--- a/resources/views/pdf-designs/elegant.html
+++ b/resources/views/pdf-designs/elegant.html
@@ -5,6 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <style id="style">
+            :root {
+                --primary-color: $primary_color;
+                --secondary-color: $secondary_color;
+            }
+
             * {
                 font-size: '$font-size';
             }
@@ -86,7 +91,7 @@
                 font-size: 1.1rem;
                 padding-bottom: 1.5rem;
                 padding-left: 1rem;
-                color: #396d49;
+                color: var(--primary-color);
                 font-weight: medium;
             }
             #product-table > thead > tr > th:last-child {
@@ -131,7 +136,7 @@
             #product-table-footer
                 > *
                 [data-element='product-table-balance-due'] {
-                color: #396d49;
+                color: var(--primary-color);
             }
             #product-table-footer > * > :last-child {
                 text-align: right;
diff --git a/resources/views/pdf-designs/hipster.html b/resources/views/pdf-designs/hipster.html
index d549f89f96..dff26cff5f 100644
--- a/resources/views/pdf-designs/hipster.html
+++ b/resources/views/pdf-designs/hipster.html
@@ -5,6 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <style id="style">
+            :root {
+                --primary-color: $primary_color;
+                --secondary-color: $secondary_color;
+            }
+
             * {
                 font-size: '$font-size';
             }
@@ -30,7 +35,7 @@
             
             .header-wrapper .header-text-label {
                 font-size: 1.1rem;
-                color: #bba238;
+                color: var(--primary-color);
                 text-transform: uppercase;
                 font-weight: bold;
             }
@@ -83,7 +88,7 @@
                 [data-element='entity-details-wrapper-invoice-number-label'],
             .entity-details-wrapper
                 [data-element='entity-details-wrapper-amount-due'] {
-                color: #bba238;
+                color: var(--primary-color);
                 font-weight: bold;
             }
 
@@ -137,7 +142,7 @@
             #product-table-footer
                 > *
                 [data-element='product-table-balance-due'] {
-                color: #bba238;
+                color: var(--primary-color);
             }
             #product-table-footer > * > :last-child {
                 text-align: right;
diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html
index c4d06d678f..1ceb3d19bc 100644
--- a/resources/views/pdf-designs/modern.html
+++ b/resources/views/pdf-designs/modern.html
@@ -5,6 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <style id="style">
+            :root {
+                --primary-color: $primary_color;
+                --secondary-color: $secondary_color;
+            }
+
             * {
                 font-size: '$font-size';
             }
@@ -24,7 +29,7 @@
             }
 
             .header-container {
-                background-color: #f46521;
+                background-color: var(--primary-color);
                 color: white;
                 display: grid;
                 grid-template-columns: 1.5fr 1fr;
@@ -79,14 +84,14 @@
             }
             #product-table > thead > tr > th {
                 padding: 0.8rem;
-                background-color: #3f3e3c;
+                background-color: var(--secondary-color);
                 color: white;
             }
             #product-table > thead > tr > th:last-child {
                 text-align: right;
             }
             #product-table > tbody > tr > td {
-                border-bottom: 1px solid #3f3e3c;
+                border-bottom: 1px solid var(--secondary-color);
                 padding: 1rem;
             }
             #product-table > tbody > tr > td:first-child {
@@ -98,7 +103,7 @@
 
             .footer-wrapper {
                 margin-top: 1rem;
-                background-color: #f46521;
+                background-color: var(--primary-color);
                 padding: 1rem;
                 height: 160px;
                 width: 100%;
@@ -154,7 +159,7 @@
                 padding-right: 1rem;
             }
             #product-table-footer > *:last-child {
-                background-color: #3f3e3c;
+                background-color: var(--secondary-color);
                 color: white;
                 padding-top: 0.7rem;
                 padding-bottom: 0.7rem;
diff --git a/resources/views/pdf-designs/playful.html b/resources/views/pdf-designs/playful.html
index 89d6025123..1136c18a96 100644
--- a/resources/views/pdf-designs/playful.html
+++ b/resources/views/pdf-designs/playful.html
@@ -5,6 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <style id="style">
+            :root {
+                --primary-color: $primary_color;
+                --secondary-color: $secondary_color;
+            }
+
             * {
                 font-size: '$font-size';
             }
@@ -29,7 +34,7 @@
                 height: 5rem;
             }
             .header-wrapper .entity-details-wrapper {
-                background-color: #009e90;
+                background-color: var(--primary-color);
                 padding: 1rem;
                 border-radius: 10px;
             }
@@ -51,7 +56,7 @@
             }
             .contacts-wrapper .contact-label {
                 font-weight: bold;
-                color: #009e90;
+                color: var(--primary-color);
                 margin-left: 1rem;
             }
             .contacts-wrapper #company-address,
@@ -64,7 +69,7 @@
             .contacts-wrapper .company-info {
                 margin-top: 1rem;
                 padding: 1rem;
-                border-top: 1px solid #009e90;
+                border-top: 1px solid var(--primary-color);
                 display: grid;
                 grid-template-columns: 1fr 1fr;
                 gap: 10px;
@@ -72,12 +77,12 @@
             .contacts-wrapper #client-details {
                 margin-top: 1rem;
                 padding: 1rem;
-                border-top: 1px solid #009e90;
+                border-top: 1px solid var(--primary-color);
             }
 
             .contact-wrapper-left-side,
             .contact-wrapper-right-side {
-                border-bottom: 1px solid #009e90;
+                border-bottom: 1px solid var(--primary-color);
             }
 
             #product-table {
@@ -92,7 +97,7 @@
             #product-table > thead > tr > th {
                 font-size: 1.2rem;
                 padding: 1rem;
-                background: #009e90;
+                background: var(--primary-color);
                 color: white;
             }
             #product-table > thead tr > th:last-child {
@@ -107,11 +112,11 @@
                 border-bottom-right-radius: 10px;
             }
             #product-table > tbody > tr > td {
-                border-bottom: 1px solid #009e90;
+                border-bottom: 1px solid var(--primary-color);
                 padding: 1rem;
             }
             #product-table > tbody > tr > td:first-child {
-                color: #bb3a24;
+                color: var(--primary-color);
             }
             #product-table > tbody > tr > td:last-child {
                 text-align: right;
@@ -139,7 +144,7 @@
             #product-table-footer
                 > *
                 [data-element='product-table-balance-due'] {
-                color: #009e90;
+                color: var(--primary-color);
             }
             #product-table-footer > * > :last-child {
                 text-align: right;