From 247521ba370f7275f5bcb7c0647fe332beec320a Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Thu, 23 Dec 2021 17:17:23 +0200
Subject: [PATCH] dark theme

---
 .../metadata/themes/DarkVertical.json         | 10 +-
 client/css/misc/layout-manager-grid.css       | 48 ++++++++--
 client/css/misc/layout-manager-rows.css       |  5 +-
 frontend/less/dark-vertical/iframe/main.less  |  2 +
 frontend/less/dark-vertical/variables.less    | 93 +++++++++++++++++--
 frontend/less/espo-rtl/iframe/main.less       |  2 +
 frontend/less/espo-vertical/custom.less       |  2 +-
 frontend/less/espo-vertical/iframe/main.less  |  2 +
 frontend/less/espo-vertical/layout.less       | 17 +++-
 frontend/less/espo-vertical/variables.less    |  1 -
 frontend/less/espo/bootstrap/buttons.less     |  8 +-
 frontend/less/espo/bootstrap/forms.less       | 16 +++-
 frontend/less/espo/bootstrap/list-group.less  |  4 +-
 frontend/less/espo/bootstrap/tables.less      |  6 +-
 frontend/less/espo/bootstrap/type.less        |  8 +-
 frontend/less/espo/custom.less                | 33 ++++---
 frontend/less/espo/elements/buttons.less      |  6 +-
 frontend/less/espo/elements/modal.less        |  1 +
 frontend/less/espo/elements/navbar.less       |  8 ++
 frontend/less/espo/elements/panel.less        | 42 +++++----
 frontend/less/espo/elements/site.less         |  4 +-
 frontend/less/espo/iframe/main.less           |  2 +
 .../less/espo/misc/datepicker/datepicker.less |  6 +-
 .../espo/misc/fullcalendar/fullcalendar.less  | 25 ++++-
 .../misc/selectize/plugins/drag_drop.less     |  6 +-
 .../selectize/plugins/dropdown_header.less    |  3 +-
 .../misc/selectize/selectize.bootstrap3.less  | 22 +++--
 .../less/espo/misc/selectize/selectize.less   |  8 +-
 .../less/espo/misc/timeline/timeline.less     | 18 ++--
 .../less/espo/misc/timepicker/timepicker.less | 17 +++-
 frontend/less/espo/root-variables.less        | 78 ++++++++++++++--
 frontend/less/espo/value-variables.less       | 73 +++++++++++++--
 frontend/less/espo/variables.less             | 69 ++++++++++----
 frontend/less/hazyblue-vertical/custom.less   | 20 ++--
 .../less/hazyblue-vertical/iframe/main.less   |  2 +
 .../less/hazyblue-vertical/variables.less     | 20 ++--
 frontend/less/hazyblue/iframe/main.less       |  2 +
 .../less/sakura-vertical/iframe/main.less     |  2 +
 frontend/less/sakura/iframe/main.less         |  2 +
 .../less/violet-vertical/iframe/main.less     |  2 +
 frontend/less/violet/iframe/main.less         |  2 +
 41 files changed, 539 insertions(+), 158 deletions(-)

diff --git a/application/Espo/Resources/metadata/themes/DarkVertical.json b/application/Espo/Resources/metadata/themes/DarkVertical.json
index 07e0f1ede8..d00744513d 100644
--- a/application/Espo/Resources/metadata/themes/DarkVertical.json
+++ b/application/Espo/Resources/metadata/themes/DarkVertical.json
@@ -12,9 +12,9 @@
     "navbarHeight": 30,
     "logo": "client/img/logo-37.png",
     "textColor": "#dedede",
-    "chartGridColor": "#ddd",
-    "chartTickColor": "#e8eced",
-    "chartSuccessColor": "#85b75f",
-    "chartColorList": ["#6FA8D6", "#EDC555", "#DE6666", "#8A7CC2", "#c1834d", "#4E6CAD", "#ED8F42", "#d69cc7", "#bfbfbf"],
-    "chartColorAlternativeList": ["#6FA8D6", "#EDC555", "#DE6666", "#8A7CC2", "#c1834d"]
+    "chartGridColor": "#747272",
+    "chartTickColor": "#6e6b6b",
+    "chartSuccessColor": "#5d8a55",
+    "chartColorList": ["#7492cc", "#c29c4a", "#a1404a", "#6a5f96", "#b07e53", "#3a5691", "#9c7352", "#a17a97", "#858585"],
+    "chartColorAlternativeList": ["#7492cc", "#c29c4a", "#a1404a", "#6a5f96", "#b07e53"]
 }
diff --git a/client/css/misc/layout-manager-grid.css b/client/css/misc/layout-manager-grid.css
index 391b3c7f3a..7b1dcc9660 100644
--- a/client/css/misc/layout-manager-grid.css
+++ b/client/css/misc/layout-manager-grid.css
@@ -1,25 +1,30 @@
-
     #layout ul {
         list-style-type: none;
         padding: 0;
         margin: 0;
     }
+
     #layout ul > li {
-        background-color: #FFF;
+        background-color: var(--select-item-bg);
     }
+
     #layout ul.panels > li {
         padding: 5px 10px;
         margin-bottom: 20px;
         min-height: 80px;
-        border: 1px solid #CCC;
+        border: 1px solid var(--select-item-border);
+        background-color: var(--panel-bg);
         list-style: none;
     }
+
     #layout ul.rows {
         min-height: 80px;
     }
+
     #layout ul.rows > li  {
         list-style: none;
-        border: 1px solid #CCC;
+        border: 1px solid var(--select-item-border);
+        background-color: var(--panel-bg);
         margin: 8px 0;
         padding: 5px;
         height: 72px;
@@ -29,61 +34,77 @@
         min-height: 30px;
         margin-top: 12px;
     }
+
     #layout ul.panels ul.cells > li {
         width: 46%;
         float: left;
     }
+
     #layout ul.panels ul.cells > li[data-full-width="true"] {
         width: 94%;
     }
+
     #layout ul.panels ul.cells[data-cell-count="1"] > li {
         width: 94%;
         a[data-action="minusCell"] {
             display: none;
         }
     }
+
     #layout ul.panels ul.cells[data-cell-count="2"] > li {
         width: 46%;
     }
+
     #layout ul.panels ul.cells[data-cell-count="3"] > li {
         width: 30%;
     }
+
     #layout ul.panels ul.cells[data-cell-count="4"] > li {
         width: 22%;
     }
+
     #layout ul.cells > li {
         list-style: none;
-        border: 1px solid #CCC;
+        border: 1px solid var(--select-item-border);
         margin: 5px;
         padding: 5px;
         height: 32px;
     }
+
     #layout ul.cells > li.ui-state-hover {
-        border-color: #c78c8c;
+        border-color: var(--brand-primary);
     }
+
     #layout  ul.cells.disabled > li {
         margin: 5px 0;
     }
+
     #layout ul.rows > li > div {
 
     }
+
     #layout ul.disabled {
         min-height: 200px;
         width: 100%;
     }
+
     #layout ul.disabled > li a {
         display: none;
     }
+
     #layout header {
         font-weight: 600;
         margin-bottom: 10px;
     }
+
     #layout ul.panels > li label {
         display: inline;
     }
+
     #layout ul.panels > li header a {
         font-weight: normal;
     }
+
     #layout ul.panels > li > div {
         width: auto;
         text-align: left;
@@ -93,26 +114,33 @@
     ul.cells li.cell a.remove-field {
         display: none;
     }
+
     ul.cells li.cell:hover a.remove-field {
         display: block;
     }
+
     ul.cells[data-cell-count="1"] li.cell:hover a.remove-field[data-action="minusCell"] {
         display: none;
     }
+
     ul.panels > li a.remove-panel {
         display: none;
     }
+
     ul.panels > li:hover a.remove-panel {
         display: block;
     }
+
     ul.rows > li a.remove-row {
         display: none;
         width: 5px;
         height: 5px;
     }
+
     ul.rows > li:hover a.remove-row {
         display: block;
     }
+
     ul.rows > li a.add-cell {
         display: none;
         position: relative;
@@ -121,23 +149,29 @@
         top: 19px;
         right: 7px;
     }
+
     ul.rows > li:hover a.add-cell {
         display: block;
     }
+
     ul.rows > li[data-cell-count="4"]:hover a.add-cell {
         display: none;
     }
+
     ul.panels > li a.edit-panel-label {
         display: none;
     }
+
     ul.panels > li:hover a.edit-panel-label {
         display: inline-block;
     }
+
     div.row-actions {
         float: right;
         height: 50px;
         width: 12px;
     }
+
     .cell.ui-draggable-dragging {
         opacity: 0.7;
-    }
\ No newline at end of file
+    }
diff --git a/client/css/misc/layout-manager-rows.css b/client/css/misc/layout-manager-rows.css
index 95ae59f738..b56ec40111 100644
--- a/client/css/misc/layout-manager-rows.css
+++ b/client/css/misc/layout-manager-rows.css
@@ -8,7 +8,7 @@
 
     #layout ul li {
         list-style: none;
-        border: 1px solid #CCC;
+        border: 1px solid var(--select-item-border);
         margin: 5px 0;
         padding: 5px;
         height: 32px;
@@ -23,7 +23,8 @@
     }
 
     #layout ul > li {
-        background-color: #FFF;
+        background-color: var(--select-item-bg);
+        color: var(--select-item-text-color);
     }
 
     #layout ul.enabled > li .right {
diff --git a/frontend/less/dark-vertical/iframe/main.less b/frontend/less/dark-vertical/iframe/main.less
index 5c3b9915d1..d6f0d8d163 100644
--- a/frontend/less/dark-vertical/iframe/main.less
+++ b/frontend/less/dark-vertical/iframe/main.less
@@ -4,4 +4,6 @@
 
 @import "../variables.less";
 
+@import "../../espo/root-variables.less";
+
 @import "../../espo/iframe/iframe.less";
diff --git a/frontend/less/dark-vertical/variables.less b/frontend/less/dark-vertical/variables.less
index 56084ff63c..b6be2a46e0 100644
--- a/frontend/less/dark-vertical/variables.less
+++ b/frontend/less/dark-vertical/variables.less
@@ -1,23 +1,96 @@
-@input-border-value: #ececec;
-@body-bg-value: #4c4c4c;
+
+@body-bg-value: #505050;
 
 @panel-bg-value: #403d3d;
 
-@panel-default-text-value: #dedede;
-@panel-default-heading-bg-value: @panel-bg-value;
+@panel-default-text-value: #b7b7b7;
+@panel-default-bg-value: transparent;
 
 @text-color-value: #dedede;
+@text-white-color-value: @text-color-value;
 
 @main-gray-value: #ececec;
 
-@brand-primary-value: #6490b7;
-@brand-success-value: #83CD77;
-@brand-warning-value: #e4a133;
+@gray-soft-value: #cfcfcf;
+@gray-light-value: #807f7f;
+
+@gray-value: #898989;
+
+@brand-primary-value: #557593;
+@brand-success-value: #588151;
+@brand-warning-value: #ab8343;
+@brand-danger-value: #b95855;
+
+@state-danger-text-value: #a95e5c;
+@state-success-text-value: #79a97b;
+@state-warning-text-value: #ad8b50;
+@state-info-text-value: #929eb1;
+
+@state-success-bg-value: #3a5438;
+@state-danger-bg-value: #422a2a;
+@state-warning-bg-value: #443b1e;
 
 @link-color-value: #92b9db;
 
-@table-bg-value: transparent;
+@table-bg-value: @panel-bg-value;
 
-@navbar-inverse-color-value: #dedede;
+@panel-primary-text-value: @panel-default-text-value;
+
+@panel-success-bg-value: @state-success-bg-value;
+@panel-danger-bg-value: @state-danger-bg-value;
+@panel-warning-bg-value: @state-warning-bg-value;
+
+@navbar-inverse-color-value: #d3d3d3;
 @navbar-inverse-bg-value: #292929;
-@navbar-inverse-link-color-value: #F7F7F7;
+@navbar-inverse-link-color-value: @text-color-value;
+@navbar-inverse-link-hover-color-value: #fff;
+
+@navbar-bg-value: @body-bg-value;
+
+@default-border-color-value: #666262;
+
+@default-heading-bg-color-value: #222222;
+
+@modal-backdrop-bg-value: #394350;
+@modal-header-bg-value: @body-bg-value;
+@modal-footer-bg-value: @body-bg-value;
+@modal-content-bg-value: @body-bg-value;
+
+@modal-header-border-color-value: @default-heading-bg-color-value;
+
+@input-bg-value: #525050;
+@input-color-value: @text-color-value;
+@input-border-value: #666060;
+@input-border-focus-value: #4b7b9d;
+
+@site-footer-bg-value: @body-bg-value;
+@site-footer-color-value: @gray-light-value;
+
+@btn-default-bg-value: #6c6565;
+@btn-default-border-value: @input-border-value;
+@btn-default-color-value: #d1d1d1;
+
+@btn-text-color-value: #b7b7b7;
+
+@popover-bg-value: #282828;
+
+@dropdown-bg-value: #282828;
+@dropdown-link-color-value: @text-color-value;
+@dropdown-link-hover-color-value: lighten(@text-color-value, 5%);
+@dropdown-link-hover-bg-value: #000;
+@dropdown-divider-bg-value: @default-border-color-value;
+
+@select-item-bg-value: @default-heading-bg-color-value;
+@select-item-border-value: @btn-default-border-value;
+
+@calendar-today-bg-value: #544a38;
+@calendar-border-value: #747272;
+@calendar-busy-bg-value: #2e2e2e;
+
+@label-color-value: #dfdfdf;
+
+@well-bg-value: @panel-bg-value;
+@well-border-value: @panel-default-border-value;
+
+@code-bg-value: #565656;
+@code-color-value: #cdcdcd;
diff --git a/frontend/less/espo-rtl/iframe/main.less b/frontend/less/espo-rtl/iframe/main.less
index 194af90358..2c669063d3 100644
--- a/frontend/less/espo-rtl/iframe/main.less
+++ b/frontend/less/espo-rtl/iframe/main.less
@@ -4,4 +4,6 @@
 
 @import "../variables.less";
 
+@import "../../espo/root-variables.less";
+
 @import "../../espo/iframe/iframe.less";
\ No newline at end of file
diff --git a/frontend/less/espo-vertical/custom.less b/frontend/less/espo-vertical/custom.less
index 823d57415c..b099f88981 100644
--- a/frontend/less/espo-vertical/custom.less
+++ b/frontend/less/espo-vertical/custom.less
@@ -31,7 +31,7 @@
 }
 
 input.global-search-input {
-    border: 1px solid @top-navbar-bg-color;
+    border: 1px solid var(--navbar-bg);
 }
 
 @media screen and (min-width: @screen-sm-min) {
diff --git a/frontend/less/espo-vertical/iframe/main.less b/frontend/less/espo-vertical/iframe/main.less
index 194af90358..2c669063d3 100644
--- a/frontend/less/espo-vertical/iframe/main.less
+++ b/frontend/less/espo-vertical/iframe/main.less
@@ -4,4 +4,6 @@
 
 @import "../variables.less";
 
+@import "../../espo/root-variables.less";
+
 @import "../../espo/iframe/iframe.less";
\ No newline at end of file
diff --git a/frontend/less/espo-vertical/layout.less b/frontend/less/espo-vertical/layout.less
index 506cab42d9..1ed93c8955 100644
--- a/frontend/less/espo-vertical/layout.less
+++ b/frontend/less/espo-vertical/layout.less
@@ -171,7 +171,7 @@
                 left: 0;
                 height: @tob-bar-height;
                 width: 100%;
-                background-color: @top-navbar-bg-color;
+                background-color: var(--navbar-bg);
                 margin-left: @navbar-width;
                 padding-right: @navbar-width;
 
@@ -182,7 +182,11 @@
                 }
 
                 .global-search-container a.global-search-button {
-                    color: @gray-light;
+                    color: var(--navbar-link-color);
+
+                    &:hover {
+                        color: var(--navbar-link-hover-color);
+                    }
                 }
 
                 .quick-create-container {
@@ -200,10 +204,17 @@
                 }
 
                 > li > a {
-                    color: @gray-light;
+                    color: var(--navbar-link-color);
+                    &:hover {
+                        color: var(--navbar-link-hover-color);
+                    }
                     padding: 5px 10px;
                 }
 
+                > li.open > a {
+                    background-color: var(--navbar-link-active-bg);
+                }
+
                 .notifications-badge-container {
                     position: fixed;
                     top: 0;
diff --git a/frontend/less/espo-vertical/variables.less b/frontend/less/espo-vertical/variables.less
index bf608c3e20..448cbd71e5 100644
--- a/frontend/less/espo-vertical/variables.less
+++ b/frontend/less/espo-vertical/variables.less
@@ -5,7 +5,6 @@
 
 @navbar-minimized-width: 42px;
 @tob-bar-height: 30px;
-@top-navbar-bg-color: @main-gray;
 @navbar-color-border-width: 0;
 @navbar-tab-text-left-padding: 36px;
 @navbar-tab-left-padding: 12px;
diff --git a/frontend/less/espo/bootstrap/buttons.less b/frontend/less/espo/bootstrap/buttons.less
index 8a703bdb04..6c1eaddfb8 100644
--- a/frontend/less/espo/bootstrap/buttons.less
+++ b/frontend/less/espo/bootstrap/buttons.less
@@ -68,10 +68,10 @@
     @btn-default-color;
     @btn-default-bg;
     @btn-default-border;
-    @btn-default-bg-10;
-    @btn-default-bg-17;
-    @btn-default-border-12;
-    @btn-default-border-25
+    var(--btn-default-bg-5);
+    var(--btn-default-bg-17);
+    var(--btn-default-bg-12);
+    var(--btn-default-bg-25)
   );
 }
 .btn-primary {
diff --git a/frontend/less/espo/bootstrap/forms.less b/frontend/less/espo/bootstrap/forms.less
index eee8aceadb..bbc108614e 100644
--- a/frontend/less/espo/bootstrap/forms.less
+++ b/frontend/less/espo/bootstrap/forms.less
@@ -435,10 +435,22 @@ input[type="checkbox"] {
   );
 }
 .has-warning {
-  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
+  .form-control-validation-espo(
+    @state-warning-text;
+    @state-warning-text;
+    @state-warning-bg;
+    var(--state-warning-text-10);
+    var(--state-warning-text-10l)
+  );
 }
 .has-error {
-  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
+  .form-control-validation-espo(
+    @state-danger-text;
+    @state-danger-text;
+    @state-danger-bg;
+    var(--state-danger-text-10);
+    var(--state-danger-text-10l)
+  );
 }
 
 // Reposition feedback icon if input has visible label above
diff --git a/frontend/less/espo/bootstrap/list-group.less b/frontend/less/espo/bootstrap/list-group.less
index 263cce7c56..de4a4a1655 100644
--- a/frontend/less/espo/bootstrap/list-group.less
+++ b/frontend/less/espo/bootstrap/list-group.less
@@ -112,8 +112,8 @@ button.list-group-item {
 
 .list-group-item-variant-espo(success; @state-success-bg; @state-success-text; @state-success-bg-5);
 .list-group-item-variant-espo(info; @state-info-bg; @state-info-text; @state-info-bg-5);
-.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
-.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
+.list-group-item-variant-espo(warning; @state-warning-bg; @state-warning-text; var(--state-warning-bg-5));
+.list-group-item-variant-espo(danger; @state-danger-bg; @state-danger-text; var(--state-danger-bg-5));
 
 
 // Custom content options
diff --git a/frontend/less/espo/bootstrap/tables.less b/frontend/less/espo/bootstrap/tables.less
index e31a9c7c8b..2075a4cb58 100644
--- a/frontend/less/espo/bootstrap/tables.less
+++ b/frontend/less/espo/bootstrap/tables.less
@@ -4,7 +4,7 @@
 
 
 table {
-  background-color: @table-bg;
+  //background-color: @table-bg;
 }
 caption {
   padding-top: @table-cell-padding;
@@ -159,8 +159,8 @@ table {
 
 .table-row-variant-espo(success; @state-success-bg; @state-success-bg-5);
 .table-row-variant-espo(info; @state-info-bg; @state-info-bg-5);
-.table-row-variant(warning; @state-warning-bg);
-.table-row-variant(danger; @state-danger-bg);
+.table-row-variant-espo(warning; @state-warning-bg; var(--state-warning-bg-5));
+.table-row-variant-espo(danger; @state-danger-bg; var(--state-danger-bg-5));
 
 
 // Responsive tables
diff --git a/frontend/less/espo/bootstrap/type.less b/frontend/less/espo/bootstrap/type.less
index 7337e97571..a3e65a6a51 100644
--- a/frontend/less/espo/bootstrap/type.less
+++ b/frontend/less/espo/bootstrap/type.less
@@ -112,10 +112,10 @@ mark,
   .text-emphasis-variant(@state-info-text);
 }
 .text-warning {
-  .text-emphasis-variant(@state-warning-text);
+  .text-emphasis-variant-espo(@state-warning-text; var(--state-warning-text-10));
 }
 .text-danger {
-  .text-emphasis-variant(@state-danger-text);
+  .text-emphasis-variant-espo(@state-danger-text; var(--state-danger-text-10));
 }
 
 // Contextual backgrounds
@@ -134,10 +134,10 @@ mark,
   .bg-variant-espo(@state-info-bg, @state-info-bg-5);
 }
 .bg-warning {
-  .bg-variant(@state-warning-bg);
+  .bg-variant-espo(@state-warning-bg; var(--state-warning-bg-5));
 }
 .bg-danger {
-  .bg-variant(@state-danger-bg);
+  .bg-variant-espo(@state-danger-bg; var(--state-danger-bg-5));
 }
 
 
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index fbfffc6336..1aced06ef1 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -247,7 +247,7 @@ div.list-kanban > div > table {
     th.group-header {
         font-weight: normal;
 
-        color: @white-color;
+        color: var(--text-white-color);
         background-color: @gray-light;
 
         position: relative;
@@ -268,10 +268,10 @@ div.list-kanban > div > table {
                 position: relative;
                 right: 14px;
 
-                color: @white-color;
+                color: var(--text-white-color);
 
                 &:hover, &:active {
-                    color: @white-color
+                    color: var(--text-white-color);
                 }
             }
         }
@@ -290,7 +290,7 @@ div.list-kanban > div > table {
 
         > div:after {
             left: ~"calc(100% - 10px)";
-            border-color: transparent transparent transparent @white-color;
+            border-color: transparent transparent transparent var(--body-bg);
             background-color: @gray-light;
         }
 
@@ -1582,20 +1582,25 @@ body .note-editor .panel-heading {
 }
 
 .autocomplete-suggestions {
-    border: 1px solid @input-border;
-    background: @white-color;
+    border: 1px solid var(--dropdown-border);
+    background-color: var(--dropdown-bg);
+    color: var(--dropdown-link-color);
     cursor: default;
     overflow: auto;
     .box-shadow(0 6px 12px rgba(0,0,0,.175));
+
+    .autocomplete-suggestion.autocomplete-selected {
+        background-color: var(--dropdown-link-hover-bg) !important;
+        color: var(--dropdown-link-hover-color) !important;
+    }
 }
+
 .autocomplete-suggestion {
     padding: 2px 5px;
     white-space: nowrap;
     overflow: hidden;
 }
-.autocomplete-selected {
-    background: @main-gray;
-}
+
 .autocomplete-suggestions strong {
     font-weight: normal; color: @brand-primary;
 }
@@ -1626,7 +1631,7 @@ label.attach-file-label {
 }
 
 .gray-box {
-    background-color: @gray-lighter;
+    background-color: var(--select-item-bg);
     margin: 0 5px 3px 0;
     padding: 2px 3px 2px 5px;
 
@@ -2043,7 +2048,7 @@ stream-head-text-container .span {
             position: absolute;
             bottom: 0;
             left: 0;
-            background: linear-gradient(to bottom, transparent, @white-color);
+            background: linear-gradient(to bottom, transparent, var(--panel-bg));
         }
     }
 }
@@ -2942,6 +2947,12 @@ a.link-gray {
     }
 }
 
+pre {
+    background-color: var(--code-bg);
+    border-color: var(--code-border-color);
+    color: var(--code-color);
+}
+
 @import "elements/site.less";
 @import "elements/modal.less";
 @import "elements/buttons.less";
diff --git a/frontend/less/espo/elements/buttons.less b/frontend/less/espo/elements/buttons.less
index 6ff8f4f3a4..ccec26d0f1 100644
--- a/frontend/less/espo/elements/buttons.less
+++ b/frontend/less/espo/elements/buttons.less
@@ -131,7 +131,7 @@
 }
 
 .btn-text {
-    color: @gray-dark;
+    color: var(--btn-text-color);
     border-radius: 0;
 
     .far,
@@ -155,12 +155,12 @@
     }
     &:hover,
     &:focus {
-        color: @gray-dark;
+        color: var(--btn-text-color);
         text-decoration: none;
         background-color: transparent;
         .far,
         .fas {
-            color: @gray-dark;
+            color: var(--btn-text-color);
         }
     }
     &.disabled,
diff --git a/frontend/less/espo/elements/modal.less b/frontend/less/espo/elements/modal.less
index ce9c070fb7..72841089be 100644
--- a/frontend/less/espo/elements/modal.less
+++ b/frontend/less/espo/elements/modal.less
@@ -62,6 +62,7 @@
 .modal-footer {
     margin-top: @modal-title-padding;
     padding: @panel-padding @panel-padding @panel-padding;
+    background-color: @modal-footer-bg;
 }
 
 .modal-footer > .main-btn-group {
diff --git a/frontend/less/espo/elements/navbar.less b/frontend/less/espo/elements/navbar.less
index df196c1e56..431af7fa02 100644
--- a/frontend/less/espo/elements/navbar.less
+++ b/frontend/less/espo/elements/navbar.less
@@ -44,8 +44,16 @@
             font-size: 12px;
             opacity: 0.6;
         }
+
+        li.more {
+            li.open > a {
+                background-color: var(--dropdown-link-hover-bg);
+                color: var(--dropdown-link-hover-color);
+            }
+        }
     }
 
+
     @media screen and (min-width: @screen-sm-min) {
         .tabs > .more {
             li.show-more a {
diff --git a/frontend/less/espo/elements/panel.less b/frontend/less/espo/elements/panel.less
index 8f9b660172..d9f7c1986d 100644
--- a/frontend/less/espo/elements/panel.less
+++ b/frontend/less/espo/elements/panel.less
@@ -74,8 +74,8 @@
     > .panel-heading {
 
         .btn {
-            background-color: @panel-default-heading-bg;
-            border-color: @panel-default-heading-bg;
+            background-color: @panel-default-bg;
+            border-color: @panel-default-bg;
             color: @gray-soft;
         }
 
@@ -122,14 +122,18 @@
 
 body {
     .panel-default {
+        border-color: @panel-default-border;
         > .panel-heading {
+            background-color: @panel-default-bg;
+            border-color: @panel-default-bg;
             .btn-group,
             .btn-group.open {
                 .dropdown-toggle.btn {
                     &,
                     &:focus {
-                        background-color: @panel-default-heading-bg;
-                        border-color: @panel-default-heading-bg;
+                        background-color: @panel-default-bg;
+                        border-color: @panel-default-bg;
+                        color: @panel-default-text;
                     }
                 }
             }
@@ -161,20 +165,20 @@ body {
     }
     .panel-danger {
         > .panel-heading {
-            background-color: @state-danger-border;
+            background-color: @panel-danger-bg;
             .btn,
             .btn-danger {
                 color: @panel-danger-text;
-                background-color: @state-danger-border;
-                border-color: @state-danger-border;
+                background-color: @panel-danger-bg;
+                border-color: @panel-danger-bg;
             }
             .btn-group,
             .btn-group.open {
                 .dropdown-toggle.btn {
                     &,
                     &:focus {
-                        background-color: @state-danger-border;
-                        border-color: @state-danger-border;
+                        background-color: @panel-danger-bg;
+                        border-color: @panel-danger-bg;
                         color: @panel-danger-text;
                     }
                 }
@@ -207,19 +211,19 @@ body {
     }
     .panel-success {
         > .panel-heading {
-            background-color: @state-success-border;
+            background-color: @panel-success-bg;
             .btn,
             .btn-success {
                 color: @panel-success-text;
-                background-color: @state-success-border;
-                border-color: @state-success-border;
+                background-color: @panel-success-bg;
+                border-color: @panel-success-bg;
             }
             .btn-group.open {
                 .dropdown-toggle.btn {
                     &,
                     &:focus {
-                        background-color: @state-success-border;
-                        border-color: @state-success-border;
+                        background-color: @panel-success-bg;
+                        border-color: @panel-success-bg;
                         color: @panel-success-text;
                     }
                 }
@@ -228,19 +232,19 @@ body {
     }
     .panel-primary {
         > .panel-heading {
-            background-color: @panel-primary-border;
+            background-color: @panel-primary-bg;
             .btn,
             .btn-primary {
                 color: @panel-primary-text;
-                background-color: @panel-primary-border;
-                border-color: @panel-primary-border;
+                background-color: @panel-primary-bg;
+                border-color: @panel-primary-bg;
             }
             .btn-group.open {
                 .dropdown-toggle.btn {
                     &,
                     &:focus {
-                        background-color: @panel-primary-border;
-                        border-color: @panel-primary-border;
+                        background-color: @panel-primary-bg;
+                        border-color: @panel-primary-bg;
                         color: @panel-primary-text;
                     }
                 }
diff --git a/frontend/less/espo/elements/site.less b/frontend/less/espo/elements/site.less
index c242bbd250..ffea71394a 100644
--- a/frontend/less/espo/elements/site.less
+++ b/frontend/less/espo/elements/site.less
@@ -1,5 +1,5 @@
 body > footer {
-    background-color: @gray-lighter;
+    background-color: var(--site-footer-bg);
 }
 
 body > footer > p {
@@ -15,5 +15,5 @@ body > footer > p a,
 body > footer > p a:hover,
 body > footer > p a:active,
 body > footer > p a:visited {
-    color: @gray;
+    color: var(--site-footer-color);
 }
diff --git a/frontend/less/espo/iframe/main.less b/frontend/less/espo/iframe/main.less
index 992df78945..5983947fba 100644
--- a/frontend/less/espo/iframe/main.less
+++ b/frontend/less/espo/iframe/main.less
@@ -1,6 +1,8 @@
 @import "../bootstrap/variables.less";
 @import "../value-variables.less";
 @import "../variables.less";
+
+@import "../root-variables.less";
 @import "../fonts.less";
 
 @import "iframe.less";
\ No newline at end of file
diff --git a/frontend/less/espo/misc/datepicker/datepicker.less b/frontend/less/espo/misc/datepicker/datepicker.less
index a8f2acdbc5..e2ca3e803f 100644
--- a/frontend/less/espo/misc/datepicker/datepicker.less
+++ b/frontend/less/espo/misc/datepicker/datepicker.less
@@ -83,7 +83,7 @@
     }
     &.day:hover,
     &.focused {
-      background: @gray-lighter;
+      background: @dropdown-link-hover-bg;
       cursor: pointer;
     }
     &.disabled,
@@ -230,7 +230,7 @@
       border-radius: 4px;
       &:hover,
       &.focused {
-        background: @gray-lighter;
+        background: @dropdown-link-hover-bg;
       }
       &.disabled,
       &.disabled:hover {
@@ -270,7 +270,7 @@
   tfoot tr th {
     cursor: pointer;
     &:hover {
-      background: @gray-lighter;
+      background: @dropdown-link-hover-bg;
     }
   }
 
diff --git a/frontend/less/espo/misc/fullcalendar/fullcalendar.less b/frontend/less/espo/misc/fullcalendar/fullcalendar.less
index 59ebee92ca..69857301f9 100644
--- a/frontend/less/espo/misc/fullcalendar/fullcalendar.less
+++ b/frontend/less/espo/misc/fullcalendar/fullcalendar.less
@@ -63,4 +63,27 @@
     .fc-view-container {
         font-size: 85%;
     }
-}
\ No newline at end of file
+}
+
+.fc-unthemed td.fc-today {
+    background: var(--calendar-today-bg) !important;
+}
+
+.fc-unthemed th,
+.fc-unthemed td,
+.fc-unthemed thead,
+.fc-unthemed tbody,
+.fc-unthemed .fc-divider,
+.fc-unthemed .fc-row,
+.fc-unthemed .fc-content,
+.fc-unthemed .fc-popover,
+.fc-unthemed .fc-list-view,
+.fc-unthemed .fc-list-heading td {
+    border-color: var(--calendar-border) !important;
+}
+
+.fc-unthemed .fc-divider,
+.fc-unthemed .fc-popover .fc-header,
+.fc-unthemed .fc-list-heading td {
+    background: var(--calendar-border) !important;
+}
diff --git a/frontend/less/espo/misc/selectize/plugins/drag_drop.less b/frontend/less/espo/misc/selectize/plugins/drag_drop.less
index 9d42e4ac21..4b9ea9a961 100644
--- a/frontend/less/espo/misc/selectize/plugins/drag_drop.less
+++ b/frontend/less/espo/misc/selectize/plugins/drag_drop.less
@@ -1,10 +1,10 @@
 .selectize-control.plugin-drag_drop {
 	&.multi > .selectize-input > div.ui-sortable-placeholder {
 		visibility: visible !important;
-		background: #f2f2f2 !important;
-		background: rgba(0,0,0,0.06) !important;
+		//background: #f2f2f2 !important;
+		//background: rgba(0,0,0,0.06) !important;
 		border: 0 none !important;
-		.selectize-box-shadow(inset 0 0 12px 4px #fff);
+		//.selectize-box-shadow(inset 0 0 12px 4px #fff);
 	}
 	.ui-sortable-placeholder::after {
 		content: '!';
diff --git a/frontend/less/espo/misc/selectize/plugins/dropdown_header.less b/frontend/less/espo/misc/selectize/plugins/dropdown_header.less
index 80fc67dd55..d93f822b44 100644
--- a/frontend/less/espo/misc/selectize/plugins/dropdown_header.less
+++ b/frontend/less/espo/misc/selectize/plugins/dropdown_header.less
@@ -2,7 +2,8 @@
 	position: relative;
 	padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
 	border-bottom: 1px solid @selectize-color-border;
-	background: mix(@selectize-color-dropdown, @selectize-color-border, 85%);
+	//background: mix(@selectize-color-dropdown, @selectize-color-border, 85%);
+	background: @selectize-color-dropdown;
 	.selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
 }
 .selectize-dropdown-header-close {
diff --git a/frontend/less/espo/misc/selectize/selectize.bootstrap3.less b/frontend/less/espo/misc/selectize/selectize.bootstrap3.less
index 436bc641df..83afaa6159 100644
--- a/frontend/less/espo/misc/selectize/selectize.bootstrap3.less
+++ b/frontend/less/espo/misc/selectize/selectize.bootstrap3.less
@@ -22,17 +22,18 @@
 @selectize-font-size: inherit;
 @selectize-line-height: @line-height-computed;
 
-@selectize-color-text: @text-color;
+//@selectize-color-text: @text-color;
 @selectize-color-highlight: rgba(255,237,40,0.4);
 @selectize-color-input: @input-bg;
 @selectize-color-input-full: @input-bg;
 @selectize-color-input-error: @state-danger-text;
-@selectize-color-input-error-focus: darken(@selectize-color-input-error, 10%);
+//@selectize-color-input-error-focus: darken(@selectize-color-input-error, 10%);
+@selectize-color-input-error-focus: var(--state-success-text-10);
 @selectize-color-disabled: @input-bg;
-@selectize-color-item: #efefef;
+//@selectize-color-item: #efefef;
 @selectize-color-item-border: rgba(0,0,0,0);
-@selectize-color-item-active: @component-active-bg;
-@selectize-color-item-active-text: #fff;
+//@selectize-color-item-active: @component-active-bg;
+//@selectize-color-item-active-text: #fff;
 @selectize-color-item-active-border: rgba(0,0,0,0);
 @selectize-color-optgroup: @dropdown-bg;
 @selectize-color-optgroup-text: @dropdown-header-color;
@@ -46,7 +47,7 @@
 @selectize-shadow-input: none;
 @selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
 @selectize-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, .075);
-@selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@selectize-color-input-error, 20%);
+//@selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@selectize-color-input-error, 20%);
 @selectize-border: 1px solid @input-border;
 @selectize-border-radius: @input-border-radius;
 
@@ -130,7 +131,7 @@
 
     &:focus {
         border-color: @selectize-color-input-error-focus;
-        .selectize-box-shadow(@selectize-shadow-input-error-focus);
+        //.selectize-box-shadow(@selectize-shadow-input-error-focus);
     }
 }
 
@@ -154,3 +155,10 @@
 	.selectize-box-shadow(none);
 	.selectize-border-radius(0);
 }
+
+.selectize-control.plugin-drag_drop {
+	&.multi > .selectize-input > div.ui-sortable-placeholder {
+		background: transparent !important;
+		border: 1px solid var(--input-border-focus) !important;
+	}
+}
diff --git a/frontend/less/espo/misc/selectize/selectize.less b/frontend/less/espo/misc/selectize/selectize.less
index 3d88e76b02..e461c9657e 100644
--- a/frontend/less/espo/misc/selectize/selectize.less
+++ b/frontend/less/espo/misc/selectize/selectize.less
@@ -10,17 +10,17 @@
 @selectize-font-size: 13px;
 @selectize-line-height: 18px;
 
-@selectize-color-text: #303030;
+//@selectize-color-text: #303030;
 @selectize-color-border: #d0d0d0;
 @selectize-color-highlight: rgba(125,168,208,0.2);
 @selectize-color-input: #fff;
 @selectize-color-input-full: @selectize-color-input;
 @selectize-color-disabled: #fafafa;
-@selectize-color-item: #f2f2f2;
+//@selectize-color-item: #f2f2f2;
 @selectize-color-item-text: @selectize-color-text;
 @selectize-color-item-border: #d0d0d0;
-@selectize-color-item-active: #e8e8e8;
-@selectize-color-item-active-text: @selectize-color-text;
+//@selectize-color-item-active: #e8e8e8;
+//@selectize-color-item-active-text: @selectize-color-text;
 @selectize-color-item-active-border: #cacaca;
 @selectize-color-dropdown: #fff;
 @selectize-color-dropdown-border: @selectize-color-border;
diff --git a/frontend/less/espo/misc/timeline/timeline.less b/frontend/less/espo/misc/timeline/timeline.less
index 982dc5a40a..c1a45873a9 100644
--- a/frontend/less/espo/misc/timeline/timeline.less
+++ b/frontend/less/espo/misc/timeline/timeline.less
@@ -1,9 +1,9 @@
 #main > .calendar-container .timeline {
-    border: 1px solid @input-border;
+    border: 1px solid var(--calendar-border);
 }
 
 .calendar-container .timeline {
-    border-bottom: 1px solid @input-border;
+    border-bottom: 1px solid var(--calendar-border);
 }
 
 .vis-content .vis-item.clickable .vis-item-content {
@@ -23,7 +23,7 @@
 
 .vis-foreground .vis-group,
 .vis-labelset .vis-label {
-    border-bottom-color: @input-border !important;
+    border-bottom-color: var(--calendar-border) !important;
 }
 
 .vis-panel.vis-center,
@@ -32,11 +32,11 @@
 .vis-panel.vis-top,
 .vis-panel.vis-bottom,
 .vis-time-axis .vis-grid.vis-major {
-    border-color: @input-border !important;
+    border-color: var(--calendar-border) !important;
 }
 
 .vis-item .vis-item-content {
-    color: #FFF !important;
+    color: var(--white-color) !important;
 }
 
 .vis-item.vis-range .vis-item-content,
@@ -78,7 +78,7 @@
 }
 
 .vis-item.vis-background.busy {
-    background-color: @gray-lighter;
+    background-color: var(--calendar-busy-bg);
 }
 
 .vis-item.vis-background.event-range {
@@ -94,4 +94,8 @@
     .vis-timeline {
         font-size: 93%;
     }
-}
\ No newline at end of file
+}
+
+.vis-time-axis .vis-grid.vis-minor {
+    border-color: var(--calendar-border) !important;
+}
diff --git a/frontend/less/espo/misc/timepicker/timepicker.less b/frontend/less/espo/misc/timepicker/timepicker.less
index ac032240b2..fa8995eef6 100644
--- a/frontend/less/espo/misc/timepicker/timepicker.less
+++ b/frontend/less/espo/misc/timepicker/timepicker.less
@@ -2,7 +2,7 @@
 	overflow-y: auto;
 	height: 150px;
 	width: 6.5em;
-	background: #fff;
+	//background: #fff;
 	border: 1px solid #ddd;
 	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
 	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
@@ -10,6 +10,9 @@
 	outline: none;
 	z-index: 10001;
 	margin: 0;
+
+	background: @dropdown-bg;
+	border-color: @dropdown-border;
 }
 
 .ui-timepicker-wrapper.ui-timepicker-with-duration {
@@ -34,20 +37,26 @@
 	padding: 3px 0 3px 5px;
 	cursor: pointer;
 	white-space: nowrap;
-	color: #000;
+	//color: #000;
 	list-style: none;
 	margin: 0;
+
+	color: @dropdown-link-color;
 }
 
 .ui-timepicker-list:hover .ui-timepicker-selected {
-	background: #fff; color: #000;
+	//background: #fff; color: #000;
+
+	color: var(--text-color);
+	background: @dropdown-link-hover-bg;
 }
 
 li.ui-timepicker-selected,
 .ui-timepicker-list li:hover,
 .ui-timepicker-list .ui-timepicker-selected:hover {
 	background: @brand-primary;
-	color: #fff;
+	//color: #fff;
+	color: var(--white-color);
 }
 
 li.ui-timepicker-selected .ui-timepicker-duration,
diff --git a/frontend/less/espo/root-variables.less b/frontend/less/espo/root-variables.less
index 0633032608..422d1577c0 100644
--- a/frontend/less/espo/root-variables.less
+++ b/frontend/less/espo/root-variables.less
@@ -13,6 +13,7 @@
     --gray-dark: @gray-dark-value;
     --gray-light: @gray-light-value;
     --gray-lighter: @gray-lighter-value;
+    --gray: @gray-value;
 
     --gray-light-5: darken(@gray-light-value, 5%);
     --gray-light-7: darken(@gray-light-value, 7%);
@@ -91,8 +92,12 @@
     --state-danger-bg: @state-danger-bg-value;
     --state-danger-text: @state-danger-text-value;
 
+    --state-danger-text-10: darken(@state-danger-text-value, 10%);
+
     --state-danger-bg-5: darken(@state-danger-bg-value, 5%);
     --state-danger-bg-10: darken(@state-danger-bg-value, 10%);
+    --state-danger-text-10: darken(@state-danger-text-value, 10%);
+    --state-danger-text-10l: lighten(darken(@state-danger-text-value, 10%), 20);
 
     --brand-info-5: darken(@brand-info-value, 5%);
     --brand-info-10: darken(@brand-info-value, 10%);
@@ -140,9 +145,29 @@
     --state-warning-bg: @state-warning-bg-value;
     --state-warning-text: @state-warning-text-value;
 
+    --state-warning-text-10: darken(@state-warning-text-value, 10%);
+    --state-warning-text-10l: lighten(darken(@state-warning-text-value, 10%), 20);
+
     --state-warning-bg-5: darken(@state-warning-bg-value, 5%);
     --state-warning-bg-10: darken(@state-warning-bg-value, 10%);
 
+    --btn-default-bg: @btn-default-bg-value;
+    --btn-default-border: @btn-default-border-value;
+    --btn-default-color: @btn-default-color-value;
+
+    --btn-default-bg-5: darken(@btn-default-bg-value, 5%);
+    --btn-default-bg-12: darken(@btn-default-bg-value, 12%);
+    --btn-default-bg-17: darken(@btn-default-bg-value, 17%);
+    --btn-default-bg-25: darken(@btn-default-bg-value, 25%);
+
+    --btn-text-color: @btn-text-color-value;
+
+    --navbar-bg: @navbar-bg-value;
+    --navbar-link-color: @navbar-link-color-value;
+    --navbar-link-hover-color: @navbar-link-hover-color-value;
+    --navbar-link-hover-bg: @navbar-link-hover-bg-value;
+    --navbar-link-active-bg: darken(@navbar-bg-value, 10%);
+
     --navbar-inverse-color: @navbar-inverse-color-value;
     --navbar-inverse-bg: @navbar-inverse-bg-value;
     --navbar-inverse-link-color: @navbar-inverse-link-color-value;
@@ -155,6 +180,8 @@
     --navbar-inverse-link-disabled-color: @navbar-inverse-link-disabled-color-value;
     --navbar-inverse-link-disabled-bg: @navbar-inverse-link-disabled-bg-value;
 
+    --input-color: @input-color-value;
+    --input-bg: @input-bg-value;
     --input-border: @input-border-value;
     --input-border-focus: @input-border-focus-value;
     --input-border-focus-rgba: rgba(
@@ -165,8 +192,13 @@
     );
 
     --modal-backdrop-bg: @modal-backdrop-bg-value;
+    --modal-header-border-color: @modal-header-border-color-value;
+    --modal-header-bg: @modal-header-bg-value;
+    --modal-footer-bg: @modal-footer-bg-value;
+    --modal-content-bg: @modal-content-bg-value;
 
     --text-color: @text-color-value;
+    --text-white-color: @text-white-color-value;
 
     --link-color: @link-color-value;
     --link-hover-color: @link-hover-color-value;
@@ -175,20 +207,54 @@
     --table-bg-accent: @table-bg-accent-value;
 
     --code-bg: @code-bg-value;
+    --code-border-color: @code-border-color-value;
+    --code-color: @code-color-value;
 
     --default-heading-bg-color: @default-heading-bg-color-value;
     --default-border-color: @default-border-color-value;
 
-    --panel-default-text: @panel-default-text-value;
-    --panel-default-heading-bg: @panel-default-heading-bg-value;
     --panel-default-border: @panel-default-border-value;
 
-    --panel-primary-border: @panel-primary-border-value;
-
+    --panel-default-bg: @panel-default-bg-value;
+    --panel-primary-bg: @panel-primary-bg-value;
+    --panel-success-bg: @panel-success-bg-value;
+    --panel-danger-bg: @panel-danger-bg-value;
     --panel-warning-bg: @panel-warning-bg-value;
+    --panel-info-bg: @panel-info-bg-value;
 
-    --btn-default-bg: @btn-default-bg-value;
-    --btn-default-border: @btn-default-border-value;
+    --panel-default-text: @panel-default-text-value;
+    --panel-primary-text: @panel-primary-text-value;
+    --panel-success-text: @panel-success-text-value;
+    --panel-danger-text: @panel-danger-text-value;
+    --panel-warning-text: @panel-warning-text-value;
+    --panel-info-text: @panel-info-text-value;
 
     --login-panel-heading-bg: @login-panel-heading-bg-value;
+
+    --site-footer-bg: @site-footer-bg-value;
+    --site-footer-color: @site-footer-color-value;
+
+    --popover-bg: @popover-bg-value;
+
+    --dropdown-bg: @dropdown-bg-value;
+    --dropdown-link-color: @dropdown-link-color-value;
+    --dropdown-link-hover-color: @dropdown-link-hover-color-value;
+    --dropdown-link-hover-bg: @dropdown-link-hover-bg-value;
+    --dropdown-border: @dropdown-border-value;
+    --dropdown-divider-bg: @dropdown-divider-bg-value;
+
+    --calendar-today-bg: @calendar-today-bg-value;
+    --calendar-border: @calendar-border-value;
+    --calendar-busy-bg: @calendar-busy-bg-value;
+
+    --select-item-text-color: @select-item-text-color-value;
+    --select-item-bg: @select-item-bg-value;
+    --select-item-active-text-color: @select-item-active-text-color-value;
+    --select-item-active-bg: @select-item-active-bg-value;
+    --select-item-border: @select-item-border-value;
+
+    --label-color: @label-color-value;
+
+    --well-bg: @well-bg-value;
+    --well-border: @well-border-value;
 }
diff --git a/frontend/less/espo/value-variables.less b/frontend/less/espo/value-variables.less
index ddbc308e70..da7160c664 100644
--- a/frontend/less/espo/value-variables.less
+++ b/frontend/less/espo/value-variables.less
@@ -1,10 +1,11 @@
 @main-gray-value: #E8ECED;
 
-@white-color-value: #fafbfc;
+@white-color-value: #FEFEFE;
 
 @gray-base-value: #000;
 @gray-soft-value: lighten(@gray-base-value, 39.0%);
 @gray-dark-value: lighten(@gray-base-value, 20%);
+@gray-value: lighten(@gray-base, 33.5%);
 @gray-light-value: lighten(@gray-base, 46.7%);
 @gray-lighter-value: lighten(@gray-base-value, 93.5%);
 
@@ -22,7 +23,7 @@
 
 @state-primary-text-value: #5b9aca;
 
-@state-success-bg-value: lighten(spin(@brand-success-value, 5), 31%);
+@state-success-bg-value: lighten(spin(@brand-success-value, 5), 30%);
 @state-success-text-value: darken(spin(@brand-success-value, 7), 17%);
 
 @state-info-bg-value: #e5ddf8;
@@ -36,6 +37,11 @@
 
 @state-info-bg-mix-value: mix(@state-info-bg-value, lighten(@gray-base-value, 93.5%), 50%);
 
+@navbar-bg-value: @gray-lighter-value;
+@navbar-link-color-value: @gray-light-value;
+@navbar-link-hover-color-value: @gray-value;
+@navbar-link-hover-bg-value: @body-bg-value;
+
 @navbar-inverse-color-value: @gray-light-value;
 @navbar-inverse-bg-value: #4A6492;
 @navbar-inverse-border-value: transparent;
@@ -47,10 +53,17 @@
 
 @input-border-value: #D1D5D6;
 @input-border-focus-value: #66afe9;
+@input-color-value: @gray-value;
+@input-bg-value: @white-color-value;
 
 @modal-backdrop-bg-value: #DBDBDB;
+@modal-header-border-color-value: #e5e5e5;
+@modal-header-bg-value: @default-heading-bg-color-value;
+@modal-footer-bg-value: @body-bg-value;
+@modal-content-bg-value: @body-bg-value;
 
 @text-color-value: @gray-dark-value;
+@text-white-color-value: @white-color-value;
 
 @link-color-value: @brand-primary-value;
 @link-hover-color-value: darken(@link-color-value, 15%);
@@ -60,21 +73,65 @@
 @table-bg-value: transparent;
 @table-bg-accent-value: #f9f9f9;
 
-@code-bg-value: #f9f9f9;
-
 @default-border-color-value: @main-gray-value;
 @default-heading-bg-color-value: @main-gray-value;
 
+@code-bg-value: #f9f9f9;
+@code-border-color-value: @default-border-color-value;
+@code-color-value: @gray-dark-value;
+
 @panel-default-text-value: @gray-dark-value;
-@panel-default-heading-bg-value: @default-heading-bg-color;
+
 @panel-default-border-value: @default-border-color-value;
 
-@panel-primary-border-value: darken(@brand-primary-value, 12%);
+@panel-default-bg-value: @main-gray-value;
+@panel-primary-bg-value: darken(@brand-primary-value, 12%);
+@panel-danger-bg-value: @state-danger-bg-value;
 @panel-warning-bg-value: #efda97;
+@panel-success-bg-value: @state-success-bg-value;
+@panel-info-bg-value: @state-info-bg-value;
 
-@btn-default-bg-value: @main-gray;
-@btn-default-border-value: @main-gray;
+@panel-primary-border-value: darken(@brand-primary-value, 12%);
+
+@panel-primary-text-value: @white-color-value;
+@panel-danger-text-value: @state-danger-text-value;
+@panel-success-text-value: @state-success-text-value;
+@panel-warning-text-value: @state-warning-text-value;
+@panel-info-text-value: @state-info-text-value;
+
+@btn-default-color-value: #333;
+@btn-default-bg-value: @main-gray-value;
+@btn-default-border-value: @main-gray-value;
+
+@btn-text-color-value: @gray-dark-value;
+
+@site-footer-bg-value: @gray-lighter-value;
+@site-footer-color-value: @gray-value;
+
+@popover-bg-value: @white-color-value;
+
+@dropdown-bg-value: @white-color-value;
+@dropdown-link-color-value: @gray-dark-value;
+@dropdown-link-hover-color-value: darken(@gray-dark-value, 5%);
+@dropdown-link-hover-bg-value: #f5f5f5;
+@dropdown-border-value: rgba(0,0,0,.15);
+@dropdown-divider-bg-value: #e5e5e5;
 
 @login-panel-heading-bg-value: @navbar-inverse-bg-value;
 
 @gray-lighter-orange-mix-value: mix(orange, @gray-lighter-value, 50%);
+
+@calendar-today-bg-value: #fcf8e3;
+@calendar-border-value: #d1d5d6;
+@calendar-busy-bg-value: @gray-lighter-value;
+
+@select-item-text-color-value: @text-color-value;
+@select-item-bg-value: #efefef;
+@select-item-active-text-color-value: @white-color-value;
+@select-item-active-bg-value: @brand-primary-value;
+@select-item-border-value: @gray-light-value;
+
+@label-color-value: #fff;
+
+@well-bg-value: #f5f5f5;
+@well-border-value: @default-border-color-value;
diff --git a/frontend/less/espo/variables.less b/frontend/less/espo/variables.less
index 99c55833d0..1476e44ef6 100644
--- a/frontend/less/espo/variables.less
+++ b/frontend/less/espo/variables.less
@@ -10,20 +10,17 @@
 @gray-dark: var(--gray-dark);
 @gray-light: var(--gray-light);
 @gray-lighter: var(--gray-lighter);
+@gray: var(--gray);
 
 @btn-default-bg: var(--btn-default-bg);
 @btn-default-border: var(--btn-default-border);
+@btn-default-color: var(--btn-default-color);
 
 @btn-danger-bg: var(--brand-danger-5);
 @btn-info-border: var(--brand-info-5);
 @btn-success-border: var(--brand-success-5);
 @btn-warning-border: var(--brand-warning-5);
 
-@btn-default-bg-10: var(--main-gray-5);
-@btn-default-border-12: var(--main-gray-12);
-@btn-default-bg-17: var(--main-gray-17);
-@btn-default-border-25: var(--main-gray-25);
-
 @btn-primary-bg-10: var(--brand-primary-10);
 @btn-primary-border-12: var(--brand-primary-12);
 @btn-primary-bg-17: var(--brand-primary-17);
@@ -40,7 +37,7 @@
 @btn-info-border-25: var(--brand-info-25);
 
 @btn-success-bg-10: var(--brand-success-10);
-@btn-success-border-12: var(--success-info-12);
+@btn-success-border-12: var(--brand-success-12);
 @btn-success-bg-17: var(--brand-success-17);
 @btn-success-border-25: var(--brand-success-25);
 
@@ -75,6 +72,8 @@
 
 @list-group-active-text-color: var(--main-gray-lighten-40);
 
+@input-color: var(--input-color);
+@input-bg: var(--input-bg);
 @input-border: var(--input-border);
 @input-border-focus: var(--input-border-focus);
 
@@ -106,7 +105,10 @@
 
 @modal-inner-padding: @panel-padding;
 
-@modal-header-bg: @default-heading-bg-color;
+@modal-header-border-color: var(--modal-header-border-color);
+@modal-header-bg: var(--modal-header-bg);
+@modal-footer-bg: var(--modal-footer-bg);
+@modal-content-bg: var(--modal-content-bg);
 
 .container-fixed() {
     margin-right: auto;
@@ -146,15 +148,16 @@
 @state-success-text-10: var(--state-success-text-10);
 
 @state-danger-border: var(--state-danger-bg-10);
+@state-danger-text: var(--state-danger-text);
 
 @state-info-bg: var(--state-info-bg);
 @state-info-bg-5: var(--state-info-bg-5);
 
 @state-info-border: var(--state-info-bg-10);
 
+@state-warning-text: var(--state-warning-text);
 @state-warning-border: var(--state-warning-bg-10);
-
-@panel-warning-bg: var(--panel-warning-bg);
+@state-warning-bg: var(--state-warning-bg);
 
 @panel-primary-border: var(--panel-primary-border);
 
@@ -186,20 +189,38 @@
 @navbar-inverse-link-disabled-color: var(--navbar-inverse-link-disabled-color);
 @navbar-inverse-link-disabled-bg: var(--navbar-inverse-link-disabled-bg);
 
-@panel-primary-text: @white-color;
-
-@well-bg: @default-heading-bg-color;
 @breadcrumb-bg: @default-heading-bg-color;
 
-@well-border: var(--main-gray-7);
+@well-bg: var(--well-bg);
+@well-border: var(--well-border);
 
 @progress-bg: @default-heading-bg-color;
 @list-group-hover-bg: @default-heading-bg-color;
 @panel-footer-bg: @default-heading-bg-color;
 
+@label-color: var(--label-color);
+
+@panel-default-border: var(--panel-default-border);
+
 @panel-default-text: var(--panel-default-text);
-@panel-default-heading-bg: var(--panel-default-heading-bg);
-@panel-default-border: var(--default-border-color);
+@panel-primary-text: var(--panel-primary-text);
+@panel-warning-text: var(--panel-warning-text);
+@panel-info-text: var(--panel-info-text);
+@panel-success-text: var(--panel-success-text);
+@panel-danger-text: var(--panel-danger-text);
+
+@panel-default-bg: var(--panel-default-bg);
+@panel-primary-bg: var(--panel-primary-bg);
+@panel-warning-bg: var(--panel-warning-bg);
+@panel-info-bg: var(--panel-info-bg);
+@panel-success-bg: var(--panel-success-bg);
+@panel-danger-bg: var(--panel-danger-bg);
+
+@panel-primary-border: @panel-primary-bg;
+@panel-warning-border: @panel-warning-bg;
+@panel-info-border: @panel-info-bg;
+@panel-success-border: @panel-success-bg;
+@panel-danger-border: @panel-danger-bg;
 
 @default-border-color: var(--default-border-color);
 
@@ -208,8 +229,10 @@
 
 @thumbnail-border: @default-border-color;
 @table-border-color: @default-border-color;
+
 @navbar-default-toggle-hover-bg: @default-border-color;
 @navbar-default-toggle-border-color: @default-border-color;
+
 @nav-tabs-border-color: @default-border-color;
 @nav-tabs-active-link-hover-border-color: @default-border-color;
 @nav-tabs-justified-link-border-color: @default-border-color;
@@ -261,7 +284,17 @@
 
 @well-padding: 14px;
 
-@dropdown-link-hover-color: var(--gray-dark-5);
+@dropdown-bg: var(--dropdown-bg);
+@dropdown-link-hover-color: var(--dropdown-link-hover-color);
+@dropdown-link-color: var(--dropdown-link-color);
+@dropdown-link-hover-bg: var(--dropdown-link-hover-bg);
+@dropdown-border: var(--dropdown-border);
+@dropdown-divider-bg: var(--dropdown-divider-bg);
 
-@popover-bg: @white-color;
-@popover-title-bg: var(--white-color-3);
+@popover-bg: var(--popover-bg);
+@popover-title-bg: var(--white-color);
+
+@selectize-color-text: var(--select-item-text-color);
+@selectize-color-item: var(--select-item-bg);
+@selectize-color-item-active: var(--select-item-active-bg);
+@selectize-color-item-active-text: var(--select-item-active-text-color);
diff --git a/frontend/less/hazyblue-vertical/custom.less b/frontend/less/hazyblue-vertical/custom.less
index 15258db3bb..b62ce15d03 100644
--- a/frontend/less/hazyblue-vertical/custom.less
+++ b/frontend/less/hazyblue-vertical/custom.less
@@ -9,7 +9,7 @@
 @media screen and (min-width: @screen-sm-min) {
     #navbar .navbar {
         .navbar-right {
-            background-color: @navbar-bg;
+            background-color: var(--navbar-bg);
         }
     }
 }
@@ -28,20 +28,16 @@
     line-height: 17px;
 }
 
-.modal-content {
-    background-color: @white-color;
-}
-
 .dialog-record .modal-content > .modal-body {
     background-color: @body-bg;
 }
 
 .modal-body > .list-group {
-    background-color: @white-color;
+    background-color: --var(modal-content-bg);
 }
 
 .list-container > .list {
-    background-color: @white-color;
+    background-color: @table-bg;
 }
 
 .panel-heading > .btn-group {
@@ -127,7 +123,7 @@ table.table {
 
 .calendar-container > .calendar,
 .calendar-container > .timeline {
-    background-color: @white-color;
+    background-color: @table-bg;
 }
 
 #main > .calendar-container {
@@ -153,7 +149,7 @@ table.table {
 }
 
 .field .list-group {
-    background-color: @white-color;
+    background-color: var(--default-border-color);
 }
 
 .field .grid-stack-item-content {
@@ -170,7 +166,7 @@ table.table {
 }
 
 .record .stick-sub.button-container {
-    background-color: @navbar-bg !important;
+    background-color: var(--navbar-bg) !important;
     padding-bottom: 0;
 }
 
@@ -185,3 +181,7 @@ table.table {
 .list-kanban {
     padding-right: 3px;
 }
+
+.well {
+    border-width: 0;
+}
diff --git a/frontend/less/hazyblue-vertical/iframe/main.less b/frontend/less/hazyblue-vertical/iframe/main.less
index 194af90358..2c669063d3 100644
--- a/frontend/less/hazyblue-vertical/iframe/main.less
+++ b/frontend/less/hazyblue-vertical/iframe/main.less
@@ -4,4 +4,6 @@
 
 @import "../variables.less";
 
+@import "../../espo/root-variables.less";
+
 @import "../../espo/iframe/iframe.less";
\ No newline at end of file
diff --git a/frontend/less/hazyblue-vertical/variables.less b/frontend/less/hazyblue-vertical/variables.less
index 3be0915f1a..573cd7d96a 100644
--- a/frontend/less/hazyblue-vertical/variables.less
+++ b/frontend/less/hazyblue-vertical/variables.less
@@ -14,23 +14,29 @@
 @brand-warning-value: #e4a133;
 
 @panel-default-border-value: #dcdcdc;
-@panel-primary-border-value: #849fab;
+@panel-default-bg-value: transparent;
+
+@panel-primary-bg-value: #849fab;
+@panel-success-bg-value: #cee0ba;
+@panel-danger-bg-value: #ebccd1;
+@panel-warning-bg-value: #efda97;
 
 @btn-default-bg-value: #f7f7f7;
 @btn-default-border-value: #cccccc;
 
 @input-border-focus-value: #99b4cc;
 
-@panel-default-heading-bg-value: @white-color-value;
+@modal-header-bg-value: @white-color-value;
+@modal-footer-bg-value: @white-color-value;
+@modal-content-bg-value: @white-color-value;
 
 @table-bg-value: @white-color-value;
 
-@navbar-bg: @body-bg;
+@well-bg-value: @panel-bg-value;
+@well-border-value: @panel-default-border-value;
 
-@top-navbar-bg-color: @body-bg;
+@select-item-border-value: @btn-default-border-value;
 
-@modal-header-bg: @white-color;
-
-@well-bg: @white-color;
+@navbar-bg-value: @body-bg-value;
 
 @panel-border-width: 0;
diff --git a/frontend/less/hazyblue/iframe/main.less b/frontend/less/hazyblue/iframe/main.less
index b691d8c99d..4fe8ca658c 100644
--- a/frontend/less/hazyblue/iframe/main.less
+++ b/frontend/less/hazyblue/iframe/main.less
@@ -4,4 +4,6 @@
 
 @import "../../hazyblue-vertical/variables.less";
 
+@import "../../espo/root-variables.less";
+
 @import "../../espo/iframe/iframe.less";
\ No newline at end of file
diff --git a/frontend/less/sakura-vertical/iframe/main.less b/frontend/less/sakura-vertical/iframe/main.less
index 167447d5a4..048bf88920 100644
--- a/frontend/less/sakura-vertical/iframe/main.less
+++ b/frontend/less/sakura-vertical/iframe/main.less
@@ -4,4 +4,6 @@
 
 @import "../../sakura/variables.less";
 
+@import "../../espo/root-variables.less";
+
 @import "../../espo/iframe/iframe.less";
\ No newline at end of file
diff --git a/frontend/less/sakura/iframe/main.less b/frontend/less/sakura/iframe/main.less
index 194af90358..2c669063d3 100644
--- a/frontend/less/sakura/iframe/main.less
+++ b/frontend/less/sakura/iframe/main.less
@@ -4,4 +4,6 @@
 
 @import "../variables.less";
 
+@import "../../espo/root-variables.less";
+
 @import "../../espo/iframe/iframe.less";
\ No newline at end of file
diff --git a/frontend/less/violet-vertical/iframe/main.less b/frontend/less/violet-vertical/iframe/main.less
index 2cfd546e84..68f54b34a3 100644
--- a/frontend/less/violet-vertical/iframe/main.less
+++ b/frontend/less/violet-vertical/iframe/main.less
@@ -4,4 +4,6 @@
 
 @import "../../violet/variables.less";
 
+@import "../../espo/root-variables.less";
+
 @import "../../espo/iframe/iframe.less";
\ No newline at end of file
diff --git a/frontend/less/violet/iframe/main.less b/frontend/less/violet/iframe/main.less
index 194af90358..2c669063d3 100644
--- a/frontend/less/violet/iframe/main.less
+++ b/frontend/less/violet/iframe/main.less
@@ -4,4 +4,6 @@
 
 @import "../variables.less";
 
+@import "../../espo/root-variables.less";
+
 @import "../../espo/iframe/iframe.less";
\ No newline at end of file