diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 7c327eb0d..c66866c08 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #3f3f3f;
+  --layer-1: #323232;
+  --layer-2: #4c4c4c;
+  --text-color: #dedede;
+  --text-color-secondary: #888888;
+  --primary-color: #FFB300;
+  --primary-color-text: #212121;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 833db0113..b15269b06 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #3f3f3f;
+  --layer-1: #323232;
+  --layer-2: #4c4c4c;
+  --text-color: #dedede;
+  --text-color-secondary: #888888;
+  --primary-color: #1ea04c;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 553056c10..185b93bb2 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #3f3f3f;
+  --layer-1: #323232;
+  --layer-2: #4c4c4c;
+  --text-color: #dedede;
+  --text-color-secondary: #888888;
+  --primary-color: #cc285c;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index c6eb82e61..23fdf4cab 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f4f4f4;
+  --layer-2: #eaeaea;
+  --text-color: #333333;
+  --text-color-secondary: #848484;
+  --primary-color: #007ad9;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 7f0153bd5..fc4a76524 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f4f4f4;
+  --layer-2: #eaeaea;
+  --text-color: #333333;
+  --text-color-secondary: #848484;
+  --primary-color: #007ad9;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index f1d77783b..2851e8815 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f4f4f4;
+  --layer-2: #eaeaea;
+  --text-color: #333333;
+  --text-color-secondary: #848484;
+  --primary-color: #007ad9;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index c50b64ae5..a3497b90f 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f4f4f4;
+  --layer-2: #eaeaea;
+  --text-color: #333333;
+  --text-color-secondary: #848484;
+  --primary-color: #41b883;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 91797b98b..e78fe822d 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f4f4f4;
+  --layer-2: #eaeaea;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #7B95A3;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 782eb3b74..037e5fe43 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f8f9fa;
+  --layer-2: #dee2e6;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #2196F3;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index a86f043dc..c27c23031 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f8f9fa;
+  --layer-2: #dee2e6;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #00ACC1;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index 0f9183193..4036c4f53 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f8f9fa;
+  --layer-2: #dee2e6;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #673AB7;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index a020fc008..cc442c0b9 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f8f9fa;
+  --layer-2: #dee2e6;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #4CAF50;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index f4d829c89..9c51fbe83 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f8f9fa;
+  --layer-2: #dee2e6;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #3F51B5;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index b6615f53c..4bd4686f7 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f8f9fa;
+  --layer-2: #dee2e6;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #FFC107;
+  --primary-color-text: #212529;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 59b345248..1fa2e5f1f 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f8f9fa;
+  --layer-2: #dee2e6;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #9C27B0;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index b28aa5aa1..f9d6c09ef 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #ffffff;
+  --layer-1: #f8f9fa;
+  --layer-2: #dee2e6;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #009688;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 92b2de0d6..32431cfb8 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #10161d;
+  --layer-1: #1C2833;
+  --layer-2: #2C3E50;
+  --text-color: #ebedef;
+  --text-color-secondary: #aeb6bf;
+  --primary-color: #64B5F6;
+  --primary-color-text: #212529;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -24,7 +34,7 @@
 }
 
 .p-text-secondary {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .pi {
@@ -43,19 +53,19 @@
 }
 
 ::-webkit-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 ::-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-ms-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -159,7 +169,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-next {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -235,7 +245,7 @@
 .p-datepicker .p-timepicker button {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -417,7 +427,7 @@
   padding-right: 2rem;
 }
 .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown .p-dropdown-label:enabled:focus {
   outline: 0 none;
@@ -425,13 +435,13 @@
 }
 .p-dropdown .p-dropdown-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-dropdown .p-dropdown-clear-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   right: 2.857rem;
 }
 
@@ -456,7 +466,7 @@
 }
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown-panel .p-dropdown-items {
   padding: 0.5rem 0;
@@ -552,7 +562,7 @@
 
 .p-inputgroup-addon {
   background: #212F3C;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-top: 1px solid #2C3E50;
   border-left: 1px solid #2C3E50;
   border-bottom: 1px solid #2C3E50;
@@ -605,7 +615,7 @@
   border-radius: 30px;
 }
 .p-inputswitch .p-inputswitch-slider:before {
-  background: #AEB6BF;
+  background: #aeb6bf;
   width: 1.25rem;
   height: 1.25rem;
   left: 0.25rem;
@@ -672,13 +682,13 @@
 
 .p-float-label label {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition-duration: 0.2s;
 }
 
 .p-input-icon-left > i {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-left > .p-inputtext {
@@ -687,7 +697,7 @@
 
 .p-input-icon-right > i {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-right > .p-inputtext {
@@ -714,7 +724,7 @@
 }
 .p-listbox .p-listbox-header .p-listbox-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-listbox .p-listbox-list {
   padding: 0.5rem 0;
@@ -764,11 +774,11 @@
   padding: 0.5rem 0.5rem;
 }
 .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect .p-multiselect-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -795,7 +805,7 @@
 }
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect-panel .p-multiselect-header .p-checkbox {
   margin-right: 0.5rem;
@@ -803,7 +813,7 @@
 .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -928,7 +938,7 @@
 }
 .p-selectbutton .p-button .p-button-icon-left,
 .p-selectbutton .p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1008,7 +1018,7 @@
 }
 .p-togglebutton.p-button .p-button-icon-left,
 .p-togglebutton.p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1244,7 +1254,7 @@
   background: #ffffff;
   border: 1px solid #dee2e6;
   margin: 0.2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s;
   width: 2.357rem;
@@ -1333,7 +1343,7 @@
   outline-color: #BBDEFB;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-datatable .p-sortable-column .p-sortable-column-badge {
@@ -1372,7 +1382,7 @@
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
@@ -1678,7 +1688,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
   bottom: -0.7em;
   margin-left: -0.46em;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 3px;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -1693,7 +1703,7 @@
 
 .p-paginator {
   background: #1C2833;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border: 1px solid #2C3E50;
   padding: 0.5rem 1rem;
   border-radius: 3px;
@@ -1702,7 +1712,7 @@
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
 .p-paginator .p-paginator-last {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1729,7 +1739,7 @@
   border: 0 none;
 }
 .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1837,7 +1847,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover {
@@ -1845,7 +1855,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
   margin-right: 0.5rem;
@@ -1876,7 +1886,7 @@
 }
 .p-tree .p-tree-filter-container .p-tree-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-treenode-children {
   padding: 0 0 0 1rem;
@@ -1936,7 +1946,7 @@
   outline-color: #BBDEFB;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-treetable .p-sortable-column .p-sortable-column-badge {
@@ -1975,7 +1985,7 @@
   padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -2123,7 +2133,7 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-card .p-card-content {
   padding: 1rem 0;
@@ -2184,7 +2194,7 @@
 .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -2230,7 +2240,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -2246,7 +2256,7 @@
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabview .p-tabview-nav li.p-highlight a {
@@ -2294,7 +2304,7 @@
 .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -2386,7 +2396,7 @@
 }
 .p-sidebar .p-sidebar-close {
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -2480,11 +2490,11 @@
   color: #ebedef;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-contextmenu {
@@ -2505,11 +2515,11 @@
   color: #ebedef;
 }
 .p-contextmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-contextmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2568,11 +2578,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2602,11 +2612,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-megamenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2680,11 +2690,11 @@
   color: #ebedef;
 }
 .p-menu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2738,11 +2748,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menubar .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2771,11 +2781,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2881,11 +2891,11 @@
   color: #ebedef;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2947,7 +2957,7 @@
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   margin-top: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
@@ -2985,7 +2995,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -3004,7 +3014,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
@@ -3032,11 +3042,11 @@
   color: #ebedef;
 }
 .p-tieredmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css
index 4afee722a..307606e9b 100644
--- a/public/themes/vela-cyan/theme.css
+++ b/public/themes/vela-cyan/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #10161d;
+  --layer-1: #1C2833;
+  --layer-2: #2C3E50;
+  --text-color: #ebedef;
+  --text-color-secondary: #aeb6bf;
+  --primary-color: #4DD0E1;
+  --primary-color-text: #212529;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -24,7 +34,7 @@
 }
 
 .p-text-secondary {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .pi {
@@ -43,19 +53,19 @@
 }
 
 ::-webkit-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 ::-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-ms-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -159,7 +169,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-next {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -235,7 +245,7 @@
 .p-datepicker .p-timepicker button {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -417,7 +427,7 @@
   padding-right: 2rem;
 }
 .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown .p-dropdown-label:enabled:focus {
   outline: 0 none;
@@ -425,13 +435,13 @@
 }
 .p-dropdown .p-dropdown-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-dropdown .p-dropdown-clear-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   right: 2.857rem;
 }
 
@@ -456,7 +466,7 @@
 }
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown-panel .p-dropdown-items {
   padding: 0.5rem 0;
@@ -552,7 +562,7 @@
 
 .p-inputgroup-addon {
   background: #212F3C;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-top: 1px solid #2C3E50;
   border-left: 1px solid #2C3E50;
   border-bottom: 1px solid #2C3E50;
@@ -605,7 +615,7 @@
   border-radius: 30px;
 }
 .p-inputswitch .p-inputswitch-slider:before {
-  background: #AEB6BF;
+  background: #aeb6bf;
   width: 1.25rem;
   height: 1.25rem;
   left: 0.25rem;
@@ -672,13 +682,13 @@
 
 .p-float-label label {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition-duration: 0.2s;
 }
 
 .p-input-icon-left > i {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-left > .p-inputtext {
@@ -687,7 +697,7 @@
 
 .p-input-icon-right > i {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-right > .p-inputtext {
@@ -714,7 +724,7 @@
 }
 .p-listbox .p-listbox-header .p-listbox-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-listbox .p-listbox-list {
   padding: 0.5rem 0;
@@ -764,11 +774,11 @@
   padding: 0.5rem 0.5rem;
 }
 .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect .p-multiselect-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -795,7 +805,7 @@
 }
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect-panel .p-multiselect-header .p-checkbox {
   margin-right: 0.5rem;
@@ -803,7 +813,7 @@
 .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -928,7 +938,7 @@
 }
 .p-selectbutton .p-button .p-button-icon-left,
 .p-selectbutton .p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1008,7 +1018,7 @@
 }
 .p-togglebutton.p-button .p-button-icon-left,
 .p-togglebutton.p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1244,7 +1254,7 @@
   background: #ffffff;
   border: 1px solid #dee2e6;
   margin: 0.2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s;
   width: 2.357rem;
@@ -1333,7 +1343,7 @@
   outline-color: #B2EBF2;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-datatable .p-sortable-column .p-sortable-column-badge {
@@ -1372,7 +1382,7 @@
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
@@ -1678,7 +1688,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
   bottom: -0.7em;
   margin-left: -0.46em;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 3px;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -1693,7 +1703,7 @@
 
 .p-paginator {
   background: #1C2833;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border: 1px solid #2C3E50;
   padding: 0.5rem 1rem;
   border-radius: 3px;
@@ -1702,7 +1712,7 @@
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
 .p-paginator .p-paginator-last {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1729,7 +1739,7 @@
   border: 0 none;
 }
 .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1837,7 +1847,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover {
@@ -1845,7 +1855,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
   margin-right: 0.5rem;
@@ -1876,7 +1886,7 @@
 }
 .p-tree .p-tree-filter-container .p-tree-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-treenode-children {
   padding: 0 0 0 1rem;
@@ -1936,7 +1946,7 @@
   outline-color: #B2EBF2;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-treetable .p-sortable-column .p-sortable-column-badge {
@@ -1975,7 +1985,7 @@
   padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -2123,7 +2133,7 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-card .p-card-content {
   padding: 1rem 0;
@@ -2184,7 +2194,7 @@
 .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -2230,7 +2240,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -2246,7 +2256,7 @@
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabview .p-tabview-nav li.p-highlight a {
@@ -2294,7 +2304,7 @@
 .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -2386,7 +2396,7 @@
 }
 .p-sidebar .p-sidebar-close {
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -2480,11 +2490,11 @@
   color: #ebedef;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-contextmenu {
@@ -2505,11 +2515,11 @@
   color: #ebedef;
 }
 .p-contextmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-contextmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2568,11 +2578,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2602,11 +2612,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-megamenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2680,11 +2690,11 @@
   color: #ebedef;
 }
 .p-menu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2738,11 +2748,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menubar .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2771,11 +2781,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2881,11 +2891,11 @@
   color: #ebedef;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2947,7 +2957,7 @@
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   margin-top: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
@@ -2985,7 +2995,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -3004,7 +3014,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
@@ -3032,11 +3042,11 @@
   color: #ebedef;
 }
 .p-tieredmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css
index 460c42cd1..03dd77244 100644
--- a/public/themes/vela-deeppurple/theme.css
+++ b/public/themes/vela-deeppurple/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #10161d;
+  --layer-1: #1C2833;
+  --layer-2: #2C3E50;
+  --text-color: #ebedef;
+  --text-color-secondary: #aeb6bf;
+  --primary-color: #9575CD;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -24,7 +34,7 @@
 }
 
 .p-text-secondary {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .pi {
@@ -43,19 +53,19 @@
 }
 
 ::-webkit-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 ::-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-ms-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -159,7 +169,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-next {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -235,7 +245,7 @@
 .p-datepicker .p-timepicker button {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -417,7 +427,7 @@
   padding-right: 2rem;
 }
 .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown .p-dropdown-label:enabled:focus {
   outline: 0 none;
@@ -425,13 +435,13 @@
 }
 .p-dropdown .p-dropdown-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-dropdown .p-dropdown-clear-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   right: 2.857rem;
 }
 
@@ -456,7 +466,7 @@
 }
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown-panel .p-dropdown-items {
   padding: 0.5rem 0;
@@ -552,7 +562,7 @@
 
 .p-inputgroup-addon {
   background: #212F3C;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-top: 1px solid #2C3E50;
   border-left: 1px solid #2C3E50;
   border-bottom: 1px solid #2C3E50;
@@ -605,7 +615,7 @@
   border-radius: 30px;
 }
 .p-inputswitch .p-inputswitch-slider:before {
-  background: #AEB6BF;
+  background: #aeb6bf;
   width: 1.25rem;
   height: 1.25rem;
   left: 0.25rem;
@@ -672,13 +682,13 @@
 
 .p-float-label label {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition-duration: 0.2s;
 }
 
 .p-input-icon-left > i {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-left > .p-inputtext {
@@ -687,7 +697,7 @@
 
 .p-input-icon-right > i {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-right > .p-inputtext {
@@ -714,7 +724,7 @@
 }
 .p-listbox .p-listbox-header .p-listbox-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-listbox .p-listbox-list {
   padding: 0.5rem 0;
@@ -764,11 +774,11 @@
   padding: 0.5rem 0.5rem;
 }
 .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect .p-multiselect-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -795,7 +805,7 @@
 }
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect-panel .p-multiselect-header .p-checkbox {
   margin-right: 0.5rem;
@@ -803,7 +813,7 @@
 .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -928,7 +938,7 @@
 }
 .p-selectbutton .p-button .p-button-icon-left,
 .p-selectbutton .p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1008,7 +1018,7 @@
 }
 .p-togglebutton.p-button .p-button-icon-left,
 .p-togglebutton.p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1244,7 +1254,7 @@
   background: #ffffff;
   border: 1px solid #dee2e6;
   margin: 0.2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s;
   width: 2.357rem;
@@ -1333,7 +1343,7 @@
   outline-color: #D1C4E9;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-datatable .p-sortable-column .p-sortable-column-badge {
@@ -1372,7 +1382,7 @@
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
@@ -1678,7 +1688,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
   bottom: -0.7em;
   margin-left: -0.46em;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 3px;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -1693,7 +1703,7 @@
 
 .p-paginator {
   background: #1C2833;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border: 1px solid #2C3E50;
   padding: 0.5rem 1rem;
   border-radius: 3px;
@@ -1702,7 +1712,7 @@
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
 .p-paginator .p-paginator-last {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1729,7 +1739,7 @@
   border: 0 none;
 }
 .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1837,7 +1847,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover {
@@ -1845,7 +1855,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
   margin-right: 0.5rem;
@@ -1876,7 +1886,7 @@
 }
 .p-tree .p-tree-filter-container .p-tree-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-treenode-children {
   padding: 0 0 0 1rem;
@@ -1936,7 +1946,7 @@
   outline-color: #D1C4E9;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-treetable .p-sortable-column .p-sortable-column-badge {
@@ -1975,7 +1985,7 @@
   padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -2123,7 +2133,7 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-card .p-card-content {
   padding: 1rem 0;
@@ -2184,7 +2194,7 @@
 .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -2230,7 +2240,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -2246,7 +2256,7 @@
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabview .p-tabview-nav li.p-highlight a {
@@ -2294,7 +2304,7 @@
 .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -2386,7 +2396,7 @@
 }
 .p-sidebar .p-sidebar-close {
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -2480,11 +2490,11 @@
   color: #ebedef;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-contextmenu {
@@ -2505,11 +2515,11 @@
   color: #ebedef;
 }
 .p-contextmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-contextmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2568,11 +2578,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2602,11 +2612,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-megamenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2680,11 +2690,11 @@
   color: #ebedef;
 }
 .p-menu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2738,11 +2748,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menubar .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2771,11 +2781,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2881,11 +2891,11 @@
   color: #ebedef;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2947,7 +2957,7 @@
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   margin-top: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
@@ -2985,7 +2995,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -3004,7 +3014,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
@@ -3032,11 +3042,11 @@
   color: #ebedef;
 }
 .p-tieredmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 3293fd466..79ff2faed 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #10161d;
+  --layer-1: #1C2833;
+  --layer-2: #2C3E50;
+  --text-color: #ebedef;
+  --text-color-secondary: #aeb6bf;
+  --primary-color: #81C784;
+  --primary-color-text: #212529;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -24,7 +34,7 @@
 }
 
 .p-text-secondary {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .pi {
@@ -43,19 +53,19 @@
 }
 
 ::-webkit-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 ::-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-ms-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -159,7 +169,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-next {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -235,7 +245,7 @@
 .p-datepicker .p-timepicker button {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -417,7 +427,7 @@
   padding-right: 2rem;
 }
 .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown .p-dropdown-label:enabled:focus {
   outline: 0 none;
@@ -425,13 +435,13 @@
 }
 .p-dropdown .p-dropdown-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-dropdown .p-dropdown-clear-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   right: 2.857rem;
 }
 
@@ -456,7 +466,7 @@
 }
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown-panel .p-dropdown-items {
   padding: 0.5rem 0;
@@ -552,7 +562,7 @@
 
 .p-inputgroup-addon {
   background: #212F3C;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-top: 1px solid #2C3E50;
   border-left: 1px solid #2C3E50;
   border-bottom: 1px solid #2C3E50;
@@ -605,7 +615,7 @@
   border-radius: 30px;
 }
 .p-inputswitch .p-inputswitch-slider:before {
-  background: #AEB6BF;
+  background: #aeb6bf;
   width: 1.25rem;
   height: 1.25rem;
   left: 0.25rem;
@@ -672,13 +682,13 @@
 
 .p-float-label label {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition-duration: 0.2s;
 }
 
 .p-input-icon-left > i {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-left > .p-inputtext {
@@ -687,7 +697,7 @@
 
 .p-input-icon-right > i {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-right > .p-inputtext {
@@ -714,7 +724,7 @@
 }
 .p-listbox .p-listbox-header .p-listbox-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-listbox .p-listbox-list {
   padding: 0.5rem 0;
@@ -764,11 +774,11 @@
   padding: 0.5rem 0.5rem;
 }
 .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect .p-multiselect-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -795,7 +805,7 @@
 }
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect-panel .p-multiselect-header .p-checkbox {
   margin-right: 0.5rem;
@@ -803,7 +813,7 @@
 .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -928,7 +938,7 @@
 }
 .p-selectbutton .p-button .p-button-icon-left,
 .p-selectbutton .p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1008,7 +1018,7 @@
 }
 .p-togglebutton.p-button .p-button-icon-left,
 .p-togglebutton.p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1244,7 +1254,7 @@
   background: #ffffff;
   border: 1px solid #dee2e6;
   margin: 0.2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s;
   width: 2.357rem;
@@ -1333,7 +1343,7 @@
   outline-color: #C8E6C9;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-datatable .p-sortable-column .p-sortable-column-badge {
@@ -1372,7 +1382,7 @@
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
@@ -1678,7 +1688,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
   bottom: -0.7em;
   margin-left: -0.46em;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 3px;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -1693,7 +1703,7 @@
 
 .p-paginator {
   background: #1C2833;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border: 1px solid #2C3E50;
   padding: 0.5rem 1rem;
   border-radius: 3px;
@@ -1702,7 +1712,7 @@
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
 .p-paginator .p-paginator-last {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1729,7 +1739,7 @@
   border: 0 none;
 }
 .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1837,7 +1847,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover {
@@ -1845,7 +1855,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
   margin-right: 0.5rem;
@@ -1876,7 +1886,7 @@
 }
 .p-tree .p-tree-filter-container .p-tree-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-treenode-children {
   padding: 0 0 0 1rem;
@@ -1936,7 +1946,7 @@
   outline-color: #C8E6C9;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-treetable .p-sortable-column .p-sortable-column-badge {
@@ -1975,7 +1985,7 @@
   padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -2123,7 +2133,7 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-card .p-card-content {
   padding: 1rem 0;
@@ -2184,7 +2194,7 @@
 .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -2230,7 +2240,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -2246,7 +2256,7 @@
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabview .p-tabview-nav li.p-highlight a {
@@ -2294,7 +2304,7 @@
 .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -2386,7 +2396,7 @@
 }
 .p-sidebar .p-sidebar-close {
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -2480,11 +2490,11 @@
   color: #ebedef;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-contextmenu {
@@ -2505,11 +2515,11 @@
   color: #ebedef;
 }
 .p-contextmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-contextmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2568,11 +2578,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2602,11 +2612,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-megamenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2680,11 +2690,11 @@
   color: #ebedef;
 }
 .p-menu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2738,11 +2748,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menubar .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2771,11 +2781,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2881,11 +2891,11 @@
   color: #ebedef;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2947,7 +2957,7 @@
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   margin-top: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
@@ -2985,7 +2995,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -3004,7 +3014,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
@@ -3032,11 +3042,11 @@
   color: #ebedef;
 }
 .p-tieredmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css
index c74998128..2edff22b2 100644
--- a/public/themes/vela-indigo/theme.css
+++ b/public/themes/vela-indigo/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #10161d;
+  --layer-1: #1C2833;
+  --layer-2: #2C3E50;
+  --text-color: #ebedef;
+  --text-color-secondary: #aeb6bf;
+  --primary-color: #7986CB;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -24,7 +34,7 @@
 }
 
 .p-text-secondary {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .pi {
@@ -43,19 +53,19 @@
 }
 
 ::-webkit-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 ::-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-ms-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -159,7 +169,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-next {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -235,7 +245,7 @@
 .p-datepicker .p-timepicker button {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -417,7 +427,7 @@
   padding-right: 2rem;
 }
 .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown .p-dropdown-label:enabled:focus {
   outline: 0 none;
@@ -425,13 +435,13 @@
 }
 .p-dropdown .p-dropdown-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-dropdown .p-dropdown-clear-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   right: 2.857rem;
 }
 
@@ -456,7 +466,7 @@
 }
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown-panel .p-dropdown-items {
   padding: 0.5rem 0;
@@ -552,7 +562,7 @@
 
 .p-inputgroup-addon {
   background: #212F3C;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-top: 1px solid #2C3E50;
   border-left: 1px solid #2C3E50;
   border-bottom: 1px solid #2C3E50;
@@ -605,7 +615,7 @@
   border-radius: 30px;
 }
 .p-inputswitch .p-inputswitch-slider:before {
-  background: #AEB6BF;
+  background: #aeb6bf;
   width: 1.25rem;
   height: 1.25rem;
   left: 0.25rem;
@@ -672,13 +682,13 @@
 
 .p-float-label label {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition-duration: 0.2s;
 }
 
 .p-input-icon-left > i {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-left > .p-inputtext {
@@ -687,7 +697,7 @@
 
 .p-input-icon-right > i {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-right > .p-inputtext {
@@ -714,7 +724,7 @@
 }
 .p-listbox .p-listbox-header .p-listbox-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-listbox .p-listbox-list {
   padding: 0.5rem 0;
@@ -764,11 +774,11 @@
   padding: 0.5rem 0.5rem;
 }
 .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect .p-multiselect-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -795,7 +805,7 @@
 }
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect-panel .p-multiselect-header .p-checkbox {
   margin-right: 0.5rem;
@@ -803,7 +813,7 @@
 .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -928,7 +938,7 @@
 }
 .p-selectbutton .p-button .p-button-icon-left,
 .p-selectbutton .p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1008,7 +1018,7 @@
 }
 .p-togglebutton.p-button .p-button-icon-left,
 .p-togglebutton.p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1244,7 +1254,7 @@
   background: #ffffff;
   border: 1px solid #dee2e6;
   margin: 0.2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s;
   width: 2.357rem;
@@ -1333,7 +1343,7 @@
   outline-color: #C5CAE9;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-datatable .p-sortable-column .p-sortable-column-badge {
@@ -1372,7 +1382,7 @@
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
@@ -1678,7 +1688,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
   bottom: -0.7em;
   margin-left: -0.46em;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 3px;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -1693,7 +1703,7 @@
 
 .p-paginator {
   background: #1C2833;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border: 1px solid #2C3E50;
   padding: 0.5rem 1rem;
   border-radius: 3px;
@@ -1702,7 +1712,7 @@
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
 .p-paginator .p-paginator-last {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1729,7 +1739,7 @@
   border: 0 none;
 }
 .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1837,7 +1847,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover {
@@ -1845,7 +1855,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
   margin-right: 0.5rem;
@@ -1876,7 +1886,7 @@
 }
 .p-tree .p-tree-filter-container .p-tree-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-treenode-children {
   padding: 0 0 0 1rem;
@@ -1936,7 +1946,7 @@
   outline-color: #C5CAE9;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-treetable .p-sortable-column .p-sortable-column-badge {
@@ -1975,7 +1985,7 @@
   padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -2123,7 +2133,7 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-card .p-card-content {
   padding: 1rem 0;
@@ -2184,7 +2194,7 @@
 .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -2230,7 +2240,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -2246,7 +2256,7 @@
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabview .p-tabview-nav li.p-highlight a {
@@ -2294,7 +2304,7 @@
 .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -2386,7 +2396,7 @@
 }
 .p-sidebar .p-sidebar-close {
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -2480,11 +2490,11 @@
   color: #ebedef;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-contextmenu {
@@ -2505,11 +2515,11 @@
   color: #ebedef;
 }
 .p-contextmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-contextmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2568,11 +2578,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2602,11 +2612,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-megamenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2680,11 +2690,11 @@
   color: #ebedef;
 }
 .p-menu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2738,11 +2748,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menubar .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2771,11 +2781,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2881,11 +2891,11 @@
   color: #ebedef;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2947,7 +2957,7 @@
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   margin-top: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
@@ -2985,7 +2995,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -3004,7 +3014,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
@@ -3032,11 +3042,11 @@
   color: #ebedef;
 }
 .p-tieredmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 83a728fc5..33a617a6b 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #10161d;
+  --layer-1: #1C2833;
+  --layer-2: #2C3E50;
+  --text-color: #ebedef;
+  --text-color-secondary: #aeb6bf;
+  --primary-color: #FFD54F;
+  --primary-color-text: #212529;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -24,7 +34,7 @@
 }
 
 .p-text-secondary {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .pi {
@@ -43,19 +53,19 @@
 }
 
 ::-webkit-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 ::-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-ms-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -159,7 +169,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-next {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -235,7 +245,7 @@
 .p-datepicker .p-timepicker button {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -417,7 +427,7 @@
   padding-right: 2rem;
 }
 .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown .p-dropdown-label:enabled:focus {
   outline: 0 none;
@@ -425,13 +435,13 @@
 }
 .p-dropdown .p-dropdown-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-dropdown .p-dropdown-clear-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   right: 2.857rem;
 }
 
@@ -456,7 +466,7 @@
 }
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown-panel .p-dropdown-items {
   padding: 0.5rem 0;
@@ -552,7 +562,7 @@
 
 .p-inputgroup-addon {
   background: #212F3C;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-top: 1px solid #2C3E50;
   border-left: 1px solid #2C3E50;
   border-bottom: 1px solid #2C3E50;
@@ -605,7 +615,7 @@
   border-radius: 30px;
 }
 .p-inputswitch .p-inputswitch-slider:before {
-  background: #AEB6BF;
+  background: #aeb6bf;
   width: 1.25rem;
   height: 1.25rem;
   left: 0.25rem;
@@ -672,13 +682,13 @@
 
 .p-float-label label {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition-duration: 0.2s;
 }
 
 .p-input-icon-left > i {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-left > .p-inputtext {
@@ -687,7 +697,7 @@
 
 .p-input-icon-right > i {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-right > .p-inputtext {
@@ -714,7 +724,7 @@
 }
 .p-listbox .p-listbox-header .p-listbox-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-listbox .p-listbox-list {
   padding: 0.5rem 0;
@@ -764,11 +774,11 @@
   padding: 0.5rem 0.5rem;
 }
 .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect .p-multiselect-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -795,7 +805,7 @@
 }
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect-panel .p-multiselect-header .p-checkbox {
   margin-right: 0.5rem;
@@ -803,7 +813,7 @@
 .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -928,7 +938,7 @@
 }
 .p-selectbutton .p-button .p-button-icon-left,
 .p-selectbutton .p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1008,7 +1018,7 @@
 }
 .p-togglebutton.p-button .p-button-icon-left,
 .p-togglebutton.p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1244,7 +1254,7 @@
   background: #ffffff;
   border: 1px solid #dee2e6;
   margin: 0.2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s;
   width: 2.357rem;
@@ -1333,7 +1343,7 @@
   outline-color: #FFECB3;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-datatable .p-sortable-column .p-sortable-column-badge {
@@ -1372,7 +1382,7 @@
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
@@ -1678,7 +1688,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
   bottom: -0.7em;
   margin-left: -0.46em;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 3px;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -1693,7 +1703,7 @@
 
 .p-paginator {
   background: #1C2833;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border: 1px solid #2C3E50;
   padding: 0.5rem 1rem;
   border-radius: 3px;
@@ -1702,7 +1712,7 @@
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
 .p-paginator .p-paginator-last {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1729,7 +1739,7 @@
   border: 0 none;
 }
 .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1837,7 +1847,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover {
@@ -1845,7 +1855,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
   margin-right: 0.5rem;
@@ -1876,7 +1886,7 @@
 }
 .p-tree .p-tree-filter-container .p-tree-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-treenode-children {
   padding: 0 0 0 1rem;
@@ -1936,7 +1946,7 @@
   outline-color: #FFECB3;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-treetable .p-sortable-column .p-sortable-column-badge {
@@ -1975,7 +1985,7 @@
   padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -2123,7 +2133,7 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-card .p-card-content {
   padding: 1rem 0;
@@ -2184,7 +2194,7 @@
 .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -2230,7 +2240,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -2246,7 +2256,7 @@
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabview .p-tabview-nav li.p-highlight a {
@@ -2294,7 +2304,7 @@
 .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -2386,7 +2396,7 @@
 }
 .p-sidebar .p-sidebar-close {
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -2480,11 +2490,11 @@
   color: #ebedef;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-contextmenu {
@@ -2505,11 +2515,11 @@
   color: #ebedef;
 }
 .p-contextmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-contextmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2568,11 +2578,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2602,11 +2612,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-megamenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2680,11 +2690,11 @@
   color: #ebedef;
 }
 .p-menu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2738,11 +2748,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menubar .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2771,11 +2781,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2881,11 +2891,11 @@
   color: #ebedef;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2947,7 +2957,7 @@
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   margin-top: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
@@ -2985,7 +2995,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -3004,7 +3014,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
@@ -3032,11 +3042,11 @@
   color: #ebedef;
 }
 .p-tieredmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 3889e408b..ec0d6892d 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #10161d;
+  --layer-1: #1C2833;
+  --layer-2: #2C3E50;
+  --text-color: #ebedef;
+  --text-color-secondary: #aeb6bf;
+  --primary-color: #BA68C8;
+  --primary-color-text: #ffffff;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -24,7 +34,7 @@
 }
 
 .p-text-secondary {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .pi {
@@ -43,19 +53,19 @@
 }
 
 ::-webkit-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 ::-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-ms-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -159,7 +169,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-next {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -235,7 +245,7 @@
 .p-datepicker .p-timepicker button {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -417,7 +427,7 @@
   padding-right: 2rem;
 }
 .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown .p-dropdown-label:enabled:focus {
   outline: 0 none;
@@ -425,13 +435,13 @@
 }
 .p-dropdown .p-dropdown-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-dropdown .p-dropdown-clear-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   right: 2.857rem;
 }
 
@@ -456,7 +466,7 @@
 }
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown-panel .p-dropdown-items {
   padding: 0.5rem 0;
@@ -552,7 +562,7 @@
 
 .p-inputgroup-addon {
   background: #212F3C;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-top: 1px solid #2C3E50;
   border-left: 1px solid #2C3E50;
   border-bottom: 1px solid #2C3E50;
@@ -605,7 +615,7 @@
   border-radius: 30px;
 }
 .p-inputswitch .p-inputswitch-slider:before {
-  background: #AEB6BF;
+  background: #aeb6bf;
   width: 1.25rem;
   height: 1.25rem;
   left: 0.25rem;
@@ -672,13 +682,13 @@
 
 .p-float-label label {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition-duration: 0.2s;
 }
 
 .p-input-icon-left > i {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-left > .p-inputtext {
@@ -687,7 +697,7 @@
 
 .p-input-icon-right > i {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-right > .p-inputtext {
@@ -714,7 +724,7 @@
 }
 .p-listbox .p-listbox-header .p-listbox-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-listbox .p-listbox-list {
   padding: 0.5rem 0;
@@ -764,11 +774,11 @@
   padding: 0.5rem 0.5rem;
 }
 .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect .p-multiselect-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -795,7 +805,7 @@
 }
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect-panel .p-multiselect-header .p-checkbox {
   margin-right: 0.5rem;
@@ -803,7 +813,7 @@
 .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -928,7 +938,7 @@
 }
 .p-selectbutton .p-button .p-button-icon-left,
 .p-selectbutton .p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1008,7 +1018,7 @@
 }
 .p-togglebutton.p-button .p-button-icon-left,
 .p-togglebutton.p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1244,7 +1254,7 @@
   background: #ffffff;
   border: 1px solid #dee2e6;
   margin: 0.2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s;
   width: 2.357rem;
@@ -1333,7 +1343,7 @@
   outline-color: #E1BEE7;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-datatable .p-sortable-column .p-sortable-column-badge {
@@ -1372,7 +1382,7 @@
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
@@ -1678,7 +1688,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
   bottom: -0.7em;
   margin-left: -0.46em;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 3px;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -1693,7 +1703,7 @@
 
 .p-paginator {
   background: #1C2833;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border: 1px solid #2C3E50;
   padding: 0.5rem 1rem;
   border-radius: 3px;
@@ -1702,7 +1712,7 @@
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
 .p-paginator .p-paginator-last {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1729,7 +1739,7 @@
   border: 0 none;
 }
 .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1837,7 +1847,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover {
@@ -1845,7 +1855,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
   margin-right: 0.5rem;
@@ -1876,7 +1886,7 @@
 }
 .p-tree .p-tree-filter-container .p-tree-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-treenode-children {
   padding: 0 0 0 1rem;
@@ -1936,7 +1946,7 @@
   outline-color: #E1BEE7;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-treetable .p-sortable-column .p-sortable-column-badge {
@@ -1975,7 +1985,7 @@
   padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -2123,7 +2133,7 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-card .p-card-content {
   padding: 1rem 0;
@@ -2184,7 +2194,7 @@
 .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -2230,7 +2240,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -2246,7 +2256,7 @@
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabview .p-tabview-nav li.p-highlight a {
@@ -2294,7 +2304,7 @@
 .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -2386,7 +2396,7 @@
 }
 .p-sidebar .p-sidebar-close {
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -2480,11 +2490,11 @@
   color: #ebedef;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-contextmenu {
@@ -2505,11 +2515,11 @@
   color: #ebedef;
 }
 .p-contextmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-contextmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2568,11 +2578,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2602,11 +2612,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-megamenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2680,11 +2690,11 @@
   color: #ebedef;
 }
 .p-menu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2738,11 +2748,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menubar .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2771,11 +2781,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2881,11 +2891,11 @@
   color: #ebedef;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2947,7 +2957,7 @@
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   margin-top: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
@@ -2985,7 +2995,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -3004,7 +3014,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
@@ -3032,11 +3042,11 @@
   color: #ebedef;
 }
 .p-tieredmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css
index 857f59a14..d1a31afd4 100644
--- a/public/themes/vela-teal/theme.css
+++ b/public/themes/vela-teal/theme.css
@@ -1,4 +1,14 @@
 @charset "UTF-8";
+:root {
+  --layer-0: #10161d;
+  --layer-1: #1C2833;
+  --layer-2: #2C3E50;
+  --text-color: #ebedef;
+  --text-color-secondary: #aeb6bf;
+  --primary-color: #4DB6AC;
+  --primary-color-text: #212529;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -24,7 +34,7 @@
 }
 
 .p-text-secondary {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .pi {
@@ -43,19 +53,19 @@
 }
 
 ::-webkit-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 ::-moz-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 :-ms-input-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -159,7 +169,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-next {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -235,7 +245,7 @@
 .p-datepicker .p-timepicker button {
   width: 2.5rem;
   height: 2.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -417,7 +427,7 @@
   padding-right: 2rem;
 }
 .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown .p-dropdown-label:enabled:focus {
   outline: 0 none;
@@ -425,13 +435,13 @@
 }
 .p-dropdown .p-dropdown-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-dropdown .p-dropdown-clear-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   right: 2.857rem;
 }
 
@@ -456,7 +466,7 @@
 }
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-dropdown-panel .p-dropdown-items {
   padding: 0.5rem 0;
@@ -552,7 +562,7 @@
 
 .p-inputgroup-addon {
   background: #212F3C;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-top: 1px solid #2C3E50;
   border-left: 1px solid #2C3E50;
   border-bottom: 1px solid #2C3E50;
@@ -605,7 +615,7 @@
   border-radius: 30px;
 }
 .p-inputswitch .p-inputswitch-slider:before {
-  background: #AEB6BF;
+  background: #aeb6bf;
   width: 1.25rem;
   height: 1.25rem;
   left: 0.25rem;
@@ -672,13 +682,13 @@
 
 .p-float-label label {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition-duration: 0.2s;
 }
 
 .p-input-icon-left > i {
   left: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-left > .p-inputtext {
@@ -687,7 +697,7 @@
 
 .p-input-icon-right > i {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-input-icon-right > .p-inputtext {
@@ -714,7 +724,7 @@
 }
 .p-listbox .p-listbox-header .p-listbox-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-listbox .p-listbox-list {
   padding: 0.5rem 0;
@@ -764,11 +774,11 @@
   padding: 0.5rem 0.5rem;
 }
 .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect .p-multiselect-trigger {
   background: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2.357rem;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -795,7 +805,7 @@
 }
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-multiselect-panel .p-multiselect-header .p-checkbox {
   margin-right: 0.5rem;
@@ -803,7 +813,7 @@
 .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -928,7 +938,7 @@
 }
 .p-selectbutton .p-button .p-button-icon-left,
 .p-selectbutton .p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1008,7 +1018,7 @@
 }
 .p-togglebutton.p-button .p-button-icon-left,
 .p-togglebutton.p-button .p-button-icon-right {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
   background: #485b6e;
@@ -1244,7 +1254,7 @@
   background: #ffffff;
   border: 1px solid #dee2e6;
   margin: 0.2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s;
   width: 2.357rem;
@@ -1333,7 +1343,7 @@
   outline-color: #B2DFDB;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-datatable .p-sortable-column .p-sortable-column-badge {
@@ -1372,7 +1382,7 @@
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
@@ -1678,7 +1688,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
   bottom: -0.7em;
   margin-left: -0.46em;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-radius: 3px;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -1693,7 +1703,7 @@
 
 .p-paginator {
   background: #1C2833;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border: 1px solid #2C3E50;
   padding: 0.5rem 1rem;
   border-radius: 3px;
@@ -1702,7 +1712,7 @@
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
 .p-paginator .p-paginator-last {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1729,7 +1739,7 @@
   border: 0 none;
 }
 .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #AEB6BF;
+  color: #aeb6bf;
   min-width: 2.357rem;
   height: 2.357rem;
   border: 0 none;
@@ -1837,7 +1847,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   transition: color 0.2s, box-shadow 0.2s;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:hover {
@@ -1845,7 +1855,7 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
   margin-right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
   margin-right: 0.5rem;
@@ -1876,7 +1886,7 @@
 }
 .p-tree .p-tree-filter-container .p-tree-filter-icon {
   right: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tree .p-treenode-children {
   padding: 0 0 0 1rem;
@@ -1936,7 +1946,7 @@
   outline-color: #B2DFDB;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-treetable .p-sortable-column .p-sortable-column-badge {
@@ -1975,7 +1985,7 @@
   padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
   transition: color 0.2s, box-shadow 0.2s;
 }
@@ -2123,7 +2133,7 @@
 .p-card .p-card-subtitle {
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-card .p-card-content {
   padding: 1rem 0;
@@ -2184,7 +2194,7 @@
 .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
@@ -2230,7 +2240,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -2246,7 +2256,7 @@
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabview .p-tabview-nav li.p-highlight a {
@@ -2294,7 +2304,7 @@
 .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
   width: 2rem;
   height: 2rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
   background: transparent;
   border-radius: 50%;
   transition: background-color 0.2s, box-shadow 0.2s, box-shadow 0.2s;
@@ -2386,7 +2396,7 @@
 }
 .p-sidebar .p-sidebar-close {
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -2480,11 +2490,11 @@
   color: #ebedef;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 
 .p-contextmenu {
@@ -2505,11 +2515,11 @@
   color: #ebedef;
 }
 .p-contextmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-contextmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2568,11 +2578,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2602,11 +2612,11 @@
   color: #ebedef;
 }
 .p-megamenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-megamenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-megamenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2680,11 +2690,11 @@
   color: #ebedef;
 }
 .p-menu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2738,11 +2748,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-menubar .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2771,11 +2781,11 @@
   color: #ebedef;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-left: 0.5rem;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
@@ -2881,11 +2891,11 @@
   color: #ebedef;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
@@ -2947,7 +2957,7 @@
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   margin-top: 0.5rem;
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
@@ -2985,7 +2995,7 @@
   border: solid #2C3E50;
   border-width: 0 0 2px 0;
   background: transparent;
-  color: #AEB6BF;
+  color: #aeb6bf;
   padding: 1rem;
   font-weight: 600;
   border-top-right-radius: 3px;
@@ -3004,7 +3014,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: transparent;
   border-color: #34495E;
-  color: #AEB6BF;
+  color: #aeb6bf;
   border-width: 0 0 2px 0;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
@@ -3032,11 +3042,11 @@
   color: #ebedef;
 }
 .p-tieredmenu .p-menuitem-link .p-menuitem-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
   margin-right: 0.5rem;
 }
 .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-  color: #AEB6BF;
+  color: #aeb6bf;
 }
 .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
diff --git a/src/App.vue b/src/App.vue
index cb7ccc1be..3e0e3f8c8 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,13 +69,6 @@ export default {
             themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, event.theme));
             this.theme = event.theme;
 
-            this.removeClass(document.body, 'dark-theme');
-            this.removeClass(document.body, 'dark-theme-alt');
-
-            if (event.dark) {
-                this.addClass(document.body, event.dark);
-            }
-
             this.activeMenuIndex = null;
         },
         addClass(element, className) {
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index ffe164f56..d66ebb792 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -25,22 +25,22 @@
                         <li><a @click="changeTheme($event, 'saga-orange', false)"><img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
                         <li><a @click="changeTheme($event, 'saga-purple', false)"><img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li>
                         <li><a @click="changeTheme($event, 'saga-teal', false)"><img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" /><span>Saga Teal</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-blue', 'dark-theme-alt')"><img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-cyan', 'dark-theme-alt')"><img src="./assets/images/themes/vela-cyan.png" alt="Vela Blue" /><span>Vela Cyan</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-deeppurple', 'dark-theme-alt')"><img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Blue" /><span>Vela DeepPurple</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-green', 'dark-theme-alt')"><img src="./assets/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-indigo', 'dark-theme-alt')"><img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" /><span>Vela Indigo</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-orange', 'dark-theme-alt')"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-purple', 'dark-theme-alt')"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'vela-teal', 'dark-theme-alt')"><img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" /><span>Vela Teal</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-blue')"><img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-cyan')"><img src="./assets/images/themes/vela-cyan.png" alt="Vela Blue" /><span>Vela Cyan</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-deeppurple')"><img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Blue" /><span>Vela DeepPurple</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-green')"><img src="./assets/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-indigo')"><img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" /><span>Vela Indigo</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-orange')"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-purple')"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
+                        <li><a @click="changeTheme($event, 'vela-teal')"><img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" /><span>Vela Teal</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-colored', false)"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-vue', false)"><img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li>
-                        <li><a @click="changeTheme($event, 'luna-amber', 'dark-theme')"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
-                        <li><a @click="changeTheme($event, 'luna-blue', 'dark-theme')"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'luna-green', 'dark-theme')"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
-                        <li><a @click="changeTheme($event, 'luna-pink', 'dark-theme')"><img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li>
+                        <li><a @click="changeTheme($event, 'luna-amber')"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
+                        <li><a @click="changeTheme($event, 'luna-blue')"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
+                        <li><a @click="changeTheme($event, 'luna-green')"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
+                        <li><a @click="changeTheme($event, 'luna-pink')"><img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li>
                         <li><a @click="changeTheme($event, 'rhea', false)"><img src="./assets/images/layouts/themeswitcher-rhea.png" alt="Rhea" /><span>Rhea</span></a></li>
                     </ul>
                 </transition>
@@ -97,8 +97,8 @@ export default {
         }
     },
     methods: {
-        changeTheme(event, theme, dark) {
-            this.$emit('change-theme', {theme: theme, dark: dark});
+        changeTheme(event, theme) {
+            this.$emit('change-theme', {theme: theme});
             this.activeMenuIndex = null;
             event.preventDefault();
         },
diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index 31029bf79..f290e8f06 100644
--- a/src/assets/styles/app/_content.scss
+++ b/src/assets/styles/app/_content.scss
@@ -3,92 +3,11 @@
     padding-top: 70px;
 
     .content-section {
-        display: block;
-        padding: 30px;
-
-        h2 {
-            margin-top: 0;
-        }
-
-        &.introduction {
-            color: #ffffff;
-            background-color: #607D8B;
-
-            .feature-intro {
-
-                h1 {
-                    font-size: 28px;
-                    margin: 0 0 20px 0;
-                    color: #ffffff;
-                    font-weight: 700;
-                }
-
-                p {
-                    margin: 0;
-                    line-height: 2em;
-                    font-size: 16px;
-                    color: #ffffff;
-                }
-
-                a {
-                    border-radius: 3px;
-                    background-color: #ffffff;
-                    padding: 2px 4px;
-                    color: #495057;
-                }
-            }
-        }
-
-        &.implementation {
-            background-color: #ffffff;
-
-            > hr {
-                margin-top: 24px;
-                opacity: .3;
-            }
-
-            > h3 {
-                font-weight: 500;
-                margin-top: 30px;
-                font-size: 18px;
-
-                &:first-child {
-                    margin-top: 0px;
-                }
-            }
-
-            .p-col-12 > h3 {
-                font-weight: 400;
-                margin-top: 30px;
-                font-size: 18px;
-            }
-
-            h3.first {
-                margin-top: 0px;
-            }
-
-            &.implementation-charts {
-                background-color: #FFFFFF;
-            }
-        }
-
-        .component-sizes {
-            display: inline-flex;
-            flex-direction: column;
-        
-            .p-component {
-                margin-bottom: 1em;
-                flex: 0 0 auto;
-         
-                &:last-child{
-                    margin-bottom: 0;
-                } 
-            }
-        }
+        padding: 2rem;
 
         &.content-submenu {
-            background-color: #546E7A;
-            padding: 15px 30px;
+            background-color: var(--layer-1);
+            color: var(--text-color);
 
             ul {
                 margin: 0;
@@ -99,19 +18,19 @@
                     list-style: none;
                     width: 20%;
                     display: inline-block;
-                    padding: .25em;
+                    padding: .25rem;
 
                     a {
-                        color: #ffffff;
+                        color: var(--text-color);
                         display: block;
-                        width: 90%;
+                        width: 100%;
                         border: 1px solid transparent;
-                        padding: 6px 12px;
+                        padding: .5rem 1rem;
                         border-radius: 3px;
-                        transition: background-color .1s;
+                        transition: background-color .2s;
 
                         &:hover {
-                            background-color: rgba(255,255,255,0.1);
+                            background-color: var(--layer-2);
                         }
 
                         &:focus {
@@ -128,100 +47,121 @@
             }
         }
 
-        &.documentation {
-            border-top: 1px solid #dadada;
-            background-color: #f5f7f8;
+        &.introduction {
+            color: var(--primary-color-text);
+            background-color: var(--primary-color);
+
+            .feature-intro {
+                h1 {
+                    font-size: 2rem;
+                    margin: 0 0 1.5rem 0;
+                    font-weight: 700;
+                }
+
+                p {
+                    margin: 0;
+                    line-height: 2;
+                    font-size: 1.143rem;
+                }
+
+                a {
+                    border-radius: 3px;
+                    background-color: var(--layer-0);
+                    padding: 2px 4px;
+                    color: var(--text-color);
+                }
+            }
+        }
+
+        &.implementation {
+            background-color: var(--layer-0);
+            color: var(--text-color);
 
             h3 {
-                color:  #495057;
-                margin-top: 25px;
-                margin-bottom: 0px;
-                font-size: 22px;
-                font-weight: normal;
-            }
-
-            h4 {
-                text-align: center;
-                font-weight: 700;
-                font-size: 16px;
-            }
-
-            p {
-                color:  #495057;
-                font-size: 14px;
-                line-height: 24px;
-                margin: 10px 0;
-            }
-
-            .doc-tablewrapper {
-                margin: 16px 0;
-                overflow: auto;
-            }
-
-            a {
-                color: #1976D2;
                 font-weight: 500;
-                transition: color .2s;
-            }
+                margin: 2rem 0 1rem 0;
+                font-size: 1.286rem;
 
-            .btn-viewsource {
-                background-color: #444;
-                padding: .5em 1em;
-                border-radius: 2px;
-                color: #fff;
-                font-weight: 700;
-                margin: .5em 0;
-                display: inline-block;
-                transition: background-color .2s;
-
-                &:hover {
-                    background-color: #595959;
-                    color: #fff;
+                &:first-child,
+                &.first {
+                    margin-top: 0;
                 }
             }
 
+            .component-sizes {
+                display: inline-flex;
+                flex-direction: column;
+            
+                .p-component {
+                    margin-bottom: 1rem;
+                    flex: 0 0 auto;
+             
+                    &:last-child {
+                        margin-bottom: 0;
+                    } 
+                }
+            }
+        }
+
+        &.documentation {
+            background-color: var(--layer-1);
+            color: var(--text-color);
+
+            h3 {
+                margin-top: 1.5rem;
+                margin-bottom: 0;
+                font-size: 1.5rem;
+                font-weight: 600;
+                color: var(--text-color);
+            }
+
+            p {
+                font-size: 1rem;
+                line-height: 1.5;
+                margin: .75rem 0;
+                color: var(--text-color);
+            }
+
+            .doc-tablewrapper {
+                margin: 1rem 0;
+                overflow: auto;
+            }
+
             i:not([class~="pi"]) {
-                background-color: #ffffff;
+                background-color: var(--layer-0);
+                color: var(--primary-color);
                 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
                 font-style: normal;
                 font-size: 14px;
                 padding: 2px 4px;
                 letter-spacing: .5px;
-                color: #257908;
                 border-radius: 4px;
                 font-weight: 500;
             }
 
-            /* Demo Tabs Source */
             .p-tabview {
-                background: none;
+                background: transparent;
                 border: 0 none;
 
                 .p-tabview-nav {
-                    border-radius: 3px 3px 0 0;
-                    padding: 4px 4px 0px 4px;
-                    border-bottom: 1px solid #dadada;
+                    border-radius: 0;
+                    padding: 0;
+                    border-bottom: 1px solid var(--layer-2);
                     background-color: transparent;
 
                     li {
-                        margin-right: 4px;
-                        box-shadow: none !important;
+                        margin-right: 0;
                         border: 0 none;
                         top: 1px;
-                        border-top-right-radius: 3px;
-                        border-top-left-radius: 3px;
 
                         a {
-                            font-weight: 400;
-                            color: #495057;
+                            color: var(-text-color-secondary);
                             text-shadow: none;
                             height: inherit;
                             background-color: transparent;
                             border: 0 none;
                             border-bottom: 1px solid transparent;
                             margin-bottom: -1px;
-                            border-top-right-radius: 3px;
-                            border-top-left-radius: 3px;
                             transition: background-color .2s;
 
                             &:focus {
@@ -231,23 +171,15 @@
                             }
                         }
 
-                        &.tab-doc {
-                            margin-right: 0;
-                        }
-
                         &.p-highlight a,
                         &.p-highlight:hover a {
-                            border: 0 none;
-                            background: #f5f7f8;
-                            color: #1976D2;
-                            border-bottom: 1px solid #1976D2;
+                            background: transparent;
+                            color: var(--primary-color);
+                            border-bottom: 1px solid  var(--primary-color);
                         }
 
                         &:not(.p-highlight):not(.p-disabled):hover a {
-                            color: #1976D2;
-                            background-color: transparent;
-                            border: 0 none;
-                            border-bottom: 1px solid #1976D2;
+                            border-bottom: 1px solid  var(--primary-color);
                         }
                     }
                 }
@@ -255,16 +187,27 @@
                 .p-tabview-panels {
                     background: transparent;
                     border: 0 none;
-                    color: #495057;
+
+                    a {
+                        background-color: var(--primary-color);
+                        color: var(--primary-color-text);
+                        border-radius: 3px;
+                        padding: 2px 4px;
+                    }
+        
+                    .btn-viewsource {
+                        display: inline-block;
+                        padding: .5rem 1rem;
+                    }
                 }
             }
         }
 
         &.support {
             .support-image {
-                background-color: #495057;
-                padding: 30px;
-                color: #ffffff;
+                background-color: var(--text-color-secondary);
+                padding: 2rem;
+                color: var(--layer-0);
                 text-align: left;
 
                 .p-md-6:last-child {
@@ -272,7 +215,7 @@
                 }
 
                 h3, p {
-                    color: #ffffff;
+                    color: var(--layer-0);
                 }
             }
 
@@ -284,31 +227,18 @@
         .doc-table {
             border-collapse: collapse;
             width: 100%;
+            background-color: var(--layer-0);
 
             th {
-                background-color: #d6dade;
-                padding: 10px 14px;
+                border-bottom: 1px solid var(--layer-2);
+                padding: 1rem;
                 text-align: left;
-                border: solid 1px #d6dade;
             }
 
             tbody{
                 td {
-                    padding: 10px 14px;
-                    border: 1px solid #eaecee;
-                }
-
-                tr{
-                    &:nth-child(even) {
-                        background-color: #eaecee;
-                    }
-                    &:nth-child(odd) {
-                        background-color: #ffffff;
-
-                        td {
-                            border: 1px solid #ffffff;
-                        }
-                    }
+                    padding: 1rem;
+                    border-bottom: 1px solid var(--layer-2);
                 }
             }
         }
diff --git a/src/assets/styles/app/_core.scss b/src/assets/styles/app/_core.scss
index 3846280e9..c6741e7b0 100644
--- a/src/assets/styles/app/_core.scss
+++ b/src/assets/styles/app/_core.scss
@@ -21,10 +21,10 @@ body {
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
-    background-color: #ffffff;
+    background-color: var(--layer-0);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-weight: normal;
-    color: #495057;
+    color: var(--text-color);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -105,60 +105,43 @@ a {
 }
 
 pre[class*="language-"] code {
-    border-left: 10px solid #d6dade !important;
-    box-shadow: -1px 0px 0px 0px #d6dade, 0px 0px 0px 1px #f8f8f8 !important;
-    background: #ffffff !important;
+    border-left: 10px solid var(--layer-2) !important;
+    box-shadow: none !important;
+    background: var(--layer-0) !important;
     margin: 1em 0;
+    color: var(--text-color);
+    font-size: 14px;
 
-    code {
-        font-size: 14px;
+    .token {
+        &.tag,
+        &.keyword {
+            color: #2196F3 !important;
+        }
 
-        .token {
-            &.tag {
-                color: #d57935;
-            }
+        &.attr-name,
+        &.attr-string {
+            color: #4CAF50 !important;
+        }
 
-            &.attr-value {
-                color: #308eea;
-            }
+        &.attr-value {
+            color: #00ACC1 !important;
+        }
 
-            &.language-javascript {
-                color: #1990b8;
-            }
+        &.language-javascript {
+            color: pink !important;
+        }
 
-            &.operator {
-                background: transparent;
-            }
+        &.punctuation {
+            color: var(--text-color);
+        }
+
+        &.operator {
+            background: transparent;
         }
     }
 }
 
-
 .p-toast.p-toast-topright,
 .p-toast.p-toast-topleft {
     top: 100px;
-}
-
-.dark-theme {
-    .implementation {
-        background-color: #3f3f3f !important;
-        color: #dedede !important;
-
-        > h3,
-        > h4 {
-            color: #dedede !important
-        }
-    }
-}
-
-.dark-theme-alt {
-    .implementation {
-        background-color: #10161d !important;
-        color: #ebedef !important;
-    }
-
-    > h3,
-    > h4 {
-        color: #ebedef !important
-    }
 }
\ No newline at end of file
diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss
index c787a9194..b9f94e0e7 100644
--- a/src/assets/styles/app/_menu.scss
+++ b/src/assets/styles/app/_menu.scss
@@ -3,21 +3,19 @@
     left: 0;
     top: 70px;
     height: calc(100% - 70px);
-    background-color: #ffffff;
+    background-color: var(--layer-0);
     overflow: auto;
     width: 250px;
-    box-shadow: 0 0 2px rgba(0,0,0,0.25);
+    border-right: 1px solid var(--layer-2);
 
     .layout-menu {
-
         > span {
             width: 100%;
-            height: 50px;
+            height: 3.5rem;
             display: block;
-            padding: 0px 0px 0px 20px;
-            margin-bottom: 12px;
-            background-color: #f8f9fa;
-            color: #767676;
+            padding-left: 1.5rem;
+            background-color: var(--layer-1);
+            color: var(--text-color-secondary);
             font-weight: 700;
             user-select: none;
             transition: background-color .2s;
@@ -25,44 +23,26 @@
             align-items: center;
 
             span {
-                font-size: 14px;
-                margin: 0px 0px 0px 8px;
+                margin-left: .5rem;
                 display: block;
                 line-height: 1;
             }
-
-            img {
-                width: 20px;
-                height: auto;
-                float: left;
-
-                &.layout-menu-icon-active {
-                    display: none;
-                }
-
-                &.layout-menu-icon-inactive {
-                    display: inline;
-                }
-            }
         }
 
         > div {
-            background-color: #ffffff;
-            padding: 0 15px 15px 15px;
+            padding: 1rem;
             display: flex;
             flex-direction: column;
 
             a {
-                display: inline-block;
-                padding: 6px;
-                cursor: pointer;
-                border-radius: 4px;
-                font-size: 14px;
-                color: #495057;
+                color: var(--text-color);
+                display: block;
+                padding: .5rem;
+                border-radius: 3px;
                 transition: background-color .2s;
 
                 &:hover {
-                    background-color: #e9ecef;
+                    background-color: var(--layer-2);
                 }
 
                 &:focus {
@@ -73,21 +53,8 @@
                 }
 
                 &.router-link-active {
-                    color: #526F89;
                     font-weight: 700;
                 }
-
-                .menuitem-badge {
-                    background: linear-gradient(to bottom, #96c93d, #00b09b);
-                    padding: 2px 4px;
-                    vertical-align: middle;
-                    border-radius: 3px;
-                    color: #ffffff;
-                    font-weight: bold;
-                    font-size: 11px;
-                    position: relative;
-                    top: -1px;
-                }
             }
         }
     }
diff --git a/src/assets/styles/app/_topbar.scss b/src/assets/styles/app/_topbar.scss
index 93f829893..561ff457c 100644
--- a/src/assets/styles/app/_topbar.scss
+++ b/src/assets/styles/app/_topbar.scss
@@ -1,6 +1,5 @@
 .layout-topbar {
-    background-color: #ffffff;
-    display: block;
+    background-color: var(--layer-0);
     padding: 0;
     height: 70px;
     position: fixed;
@@ -12,8 +11,7 @@
 
     .menu-button {
         display: none;
-        color: #495057;
-        font-size: 24px;
+        color: var(--text-color);
         position: absolute;
         left: 0;
         top: 0;
@@ -21,20 +19,21 @@
         height: 70px;
         line-height: 70px;
         text-align: center;
-        cursor: pointer;
         transition: background-color .2s;
+        cursor: pointer;
 
         &:hover {
             background-color: #e9ecef;
         }
 
         i {
+            font-size: 24px;
             line-height: inherit;
         }
     }
 
     .logo {
-        margin-left: 45px;
+        margin-left: 35px;
         margin-top: 8px;
         display: inline-block;
 
@@ -63,18 +62,18 @@
 
             > a {
                 text-decoration: none;
-                color: #495057;
+                color: var(--text-color);
                 min-width: 120px;
                 font-size: 16px;
                 display: inline-block;
                 text-align: center;
                 user-select: none;
                 line-height: inherit;
-                cursor: pointer;
                 transition: background-color .2s;
+                cursor: pointer;
 
                 &:hover {
-                    background-color: #e9ecef;
+                    background-color: var(--layer-2);
                 }
 
                 &:focus {
@@ -94,11 +93,11 @@
                     right: 0;
                     width: 275px;
                     max-height: 400px;
-                    background-color: #ffffff;
+                    background-color: var(--layer-0);
                     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
                     overflow: auto;
                     list-style-type: none;
-                    padding: 6px 12px;
+                    padding: 1rem;
                     margin: 0;
                     border-radius: 3px;
 
@@ -106,68 +105,48 @@
                         line-height: 1;
 
                         &.topbar-submenu-header {
-                            padding: 6px 12px;
+                            padding: .5rem;
                             font-weight: bold;
                             text-align: left;
-                            margin-top: 18px;
+                            margin-top: 1rem;
 
                             &:first-child {
-                                margin-top: 6px;
+                                margin-top: 0;
                             }
                         }
                     }
 
                     a {
                         text-decoration: none;
-                        color: #495057;
-                        padding: 8px 12px;
+                        color: var(--text-color);
+                        padding: .5rem;
                         display: block;
                         user-select: none;
                         transition: background-color .2s;
+                        border-radius: 3px;
                         cursor: pointer;
 
                         &:hover {
-                            background-color: #e9ecef;
+                            background-color: var(--layer-2);
                             cursor: pointer;
                         }
 
+                        span {
+                            margin-left: .5rem;
+                            vertical-align: middle;
+                        }
+
+                        i {
+                            vertical-align: middle;
+                            color: var(--text-color-secondary);
+                            vertical-align: middle;
+                        }
+
                         img {
                             width: 32px;
                             vertical-align: middle;
-                            margin-right: 4px;
+                            margin-right: .5rem;
                         }
-
-                        span {
-                            margin-left: 8px;
-                        }
-
-                        i {
-                            vertical-align: middle;
-                            font-size: 18px;
-                            margin-right: 4px;
-                            margin-left: 4px;
-                            color: #6c757d;
-                        }
-                    }
-
-                    li:last-child {
-                        a {
-                            border-bottom: 0 none;
-                        }
-                    }
-                }
-
-                &.topbar-resources-submenu {
-                    > ul {
-                        a {
-                            padding: 12px 6px;
-
-                            span {
-                                margin-left: 6px;
-                            }
-                        }
-
-
                     }
                 }
             }
diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue
index dba4199ea..3196ebd88 100755
--- a/src/views/galleria/GalleriaIndicatorDemo.vue
+++ b/src/views/galleria/GalleriaIndicatorDemo.vue
@@ -23,8 +23,6 @@
 				</template>
             </Galleria>
 
-            <hr />
-
             <h3>Change Preview On Indicator Hover</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true">
@@ -38,8 +36,6 @@
 				</template>
             </Galleria>
 
-            <hr />
-
             <h3>Show Indicator On Preview</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true">
@@ -53,8 +49,6 @@
 				</template>
             </Galleria>
 
-            <hr />
-
             <h3>Position</h3>
             <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
                 :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="bottom">
diff --git a/src/views/inputtext/InputTextDemo.vue b/src/views/inputtext/InputTextDemo.vue
index 98fbe07ef..d583f8290 100755
--- a/src/views/inputtext/InputTextDemo.vue
+++ b/src/views/inputtext/InputTextDemo.vue
@@ -8,7 +8,7 @@
         </div>
 
         <div class="content-section implementation">
-            <h3 class="first">Basic</h3>
+            <h3>Basic</h3>
             <InputText type="text" v-model="value1" />
             <span :style="{marginLeft: '.5em'}">{{value1}}</span>