diff --git a/frontend/less/dark-vertical/variables.less b/frontend/less/dark-vertical/variables.less
index 727c7bd9a1..1084549761 100644
--- a/frontend/less/dark-vertical/variables.less
+++ b/frontend/less/dark-vertical/variables.less
@@ -6,6 +6,7 @@
 
 @text-color-value: #dbdbdb;
 @text-white-color-value: @text-color-value;
+@text-gray-color-value: #979696;
 
 @main-gray-value: #ececec;
 
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 144f73b21f..75e95f845d 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -606,16 +606,16 @@ div.list-kanban > div > table {
 }
 
 table.table > thead th > a {
-    color: @gray-light;
+    color: var(--text-muted-color);
 }
 
 table.table > thead th {
-    color: @gray-light;
+    color: var(--text-muted-color);
 }
 
 .cell label,
 .filter label {
-    color: @gray-light;
+    color: var(--text-muted-color);
     font-weight: normal;
 }
 
@@ -639,11 +639,11 @@ table.table > thead th {
 }
 
 .cell .loading-value {
-    color: @gray-light;
+    color: var(--text-muted-color);
 }
 
 .cell .none-value {
-    color: @gray;
+    color: var(--text-gray-color);
 }
 
 .filter .selectize-input {
@@ -1012,7 +1012,7 @@ ul.dropdown-menu > li.checkbox:last-child {
 }
 
 .panel-body .list-container > .no-data {
-    color: var(--gray-light);
+    color: var(--text-muted-color);
 }
 
 .nav .list-container > .no-data {
@@ -1054,7 +1054,7 @@ table.table-fixed {
 }
 
 .list-row-buttons span.caret {
-    border-top-color: @gray-light;
+    border-top-color: var(--text-muted-color);
 }
 
 .list > table {
@@ -1085,10 +1085,10 @@ table.table-fixed {
 }
 
 .list > table th span.caret {
-    border-top-color: @gray-light;
+    border-top-color: var(--text-muted-color);
 }
 .list > table th span.caret-up {
-    border-bottom-color: @gray-light;
+    border-bottom-color: var(--text-muted-color);
 }
 
 .filter a.remove-filter {
@@ -2498,7 +2498,7 @@ table.table td.cell .html-container {
 
 .post-container {
     .internal-mode-switcher {
-        color: @gray-light;
+        color: var(--text-muted-color);
         margin-left: 10px;
         display: inline-block;
         position: relative;
@@ -2639,7 +2639,7 @@ table.table-admin-panel {
 
             > .icon {
                 position: absolute;
-                color: @gray-light;
+                color: var(--text-muted-color);
                 top: 1px;
             }
             > a {
diff --git a/frontend/less/espo/root-variables.less b/frontend/less/espo/root-variables.less
index 280c41c755..67473a984d 100644
--- a/frontend/less/espo/root-variables.less
+++ b/frontend/less/espo/root-variables.less
@@ -200,6 +200,8 @@
 
     --text-color: @text-color-value;
     --text-white-color: @text-white-color-value;
+    --text-muted-color: @text-muted-color-value;
+    --text-gray-color: @text-gray-color-value;
 
     --link-color: @link-color-value;
     --link-hover-color: @link-hover-color-value;
diff --git a/frontend/less/espo/value-variables.less b/frontend/less/espo/value-variables.less
index 84e9da1f1a..ea4a86b413 100644
--- a/frontend/less/espo/value-variables.less
+++ b/frontend/less/espo/value-variables.less
@@ -66,6 +66,8 @@
 
 @text-color-value: @gray-dark-value;
 @text-white-color-value: @white-color-value;
+@text-muted-color-value: @gray-light-value;
+@text-gray-color-value: #6a6a6a;
 
 @link-color-value: @brand-primary-value;
 @link-hover-color-value: darken(@link-color-value, 15%);
diff --git a/frontend/less/espo/variables.less b/frontend/less/espo/variables.less
index 8508c11d93..66fab9159a 100644
--- a/frontend/less/espo/variables.less
+++ b/frontend/less/espo/variables.less
@@ -61,6 +61,7 @@
 @brand-warning: var(--brand-warning);
 
 @text-color: var(--text-color);
+@text-muted: var(--text-muted-color);
 
 @link-color: var(--link-color);
 @link-hover-color: var(--link-hover-color);