diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
index b1db6edc05f4..8488bdb30acd 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
@@ -1,35 +1,62 @@
-::ng-deep .dx-scheduler-group-header-content,
+::ng-deep .dx-scheduler-group-header,
 ::ng-deep .dx-scheduler-date-table-cell {
   position: relative;
 }
 
+::ng-deep .dx-color-scheme-light,
+::ng-deep .dx-color-scheme-carmine,
+::ng-deep .dx-color-scheme-softblue,
+::ng-deep .dx-color-scheme-blue-light,
+::ng-deep .dx-color-scheme-saas-light,
+::ng-deep .dx-color-scheme-lime-light,
+::ng-deep .dx-color-scheme-orange-light,
+::ng-deep .dx-color-scheme-purple-light,
+::ng-deep .dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+::ng-deep .dx-color-scheme-dark,
+::ng-deep .dx-color-scheme-darkviolet,
+::ng-deep .dx-color-scheme-darkmoon,
+::ng-deep .dx-color-scheme-blue-dark,
+::ng-deep .dx-color-scheme-saas-dark,
+::ng-deep .dx-color-scheme-lime-dark,
+::ng-deep .dx-color-scheme-orange-dark,
+::ng-deep .dx-color-scheme-purple-dark,
+::ng-deep .dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+::ng-deep .dx-scheduler-header .dx-toolbar .dx-button,
+::ng-deep .dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 ::ng-deep .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-::ng-deep .dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-::ng-deep .dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
+}
+
+::ng-deep .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 ::ng-deep .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -39,7 +66,7 @@
   padding-right: 6px;
 }
 
-::ng-deep .avatar {
+::ng-deep  .avatar {
   width: 124px;
   float: left;
   overflow: hidden;
@@ -59,13 +86,13 @@
   left: 3px;
 }
 
-::ng-deep .avatar[title="Sandra Johnson"] img {
+::ng-deep .avatar[title="Greta Sims"] img {
   position: relative;
   width: 126px;
   height: 130px;
   object-fit: contain;
   top: 5px;
-  left: 3px;
+  left: -7px;
 }
 
 ::ng-deep .name {
@@ -76,20 +103,23 @@
 }
 
 ::ng-deep .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 ::ng-deep .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html
index 618aee920da6..2cd0fee88166 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html
@@ -8,7 +8,7 @@
   [startDayHour]="8"
   [endDayHour]="18"
   [showAllDayPanel]="false"
-  [height]="600"
+  [height]="710"
   [groups]="['employeeID']"
   resourceCellTemplate="resourceCellTemplate"
   dataCellTemplate="dataCellTemplate"
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
index b9517b42751a..6a0b62221343 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
@@ -27,14 +27,14 @@ export class Data {
 const employees: Employee[] = [{
   text: 'John Heart',
   id: 1,
-  color: 'rgba(50, 134, 56, 1)',
+  color: 'var(--background-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: 'rgba(194, 81, 0, 1)',
+  color: 'var(--background-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/React/App.tsx b/apps/demos/Demos/Scheduler/Overview/React/App.tsx
index efb027610670..87977bb0326e 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/Overview/React/App.tsx
@@ -20,7 +20,7 @@ const App = () => (
     views={views}
     defaultCurrentView="month"
     defaultCurrentDate={currentDate}
-    height={600}
+    height={710}
     showAllDayPanel={true}
     firstDayOfWeek={1}
     startDayHour={8}
diff --git a/apps/demos/Demos/Scheduler/Overview/React/data.ts b/apps/demos/Demos/Scheduler/Overview/React/data.ts
index 956626097f0f..b02f5c26162d 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/data.ts
+++ b/apps/demos/Demos/Scheduler/Overview/React/data.ts
@@ -82,14 +82,14 @@ export const data: Appointment[] = [
 export const employees: Resource[] = [{
   text: 'John Heart',
   id: 1,
-  color: 'rgba(50, 134, 56, 1)',
+  color: 'var(--background-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: 'rgba(194, 81, 0, 1)',
+  color: 'var(--background-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/React/styles.css b/apps/demos/Demos/Scheduler/Overview/React/styles.css
index 9c4075d10dc2..1bc06dcb204d 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/React/styles.css
@@ -3,33 +3,60 @@
   position: relative;
 }
 
+.dx-color-scheme-light,
+.dx-color-scheme-carmine,
+.dx-color-scheme-softblue,
+.dx-color-scheme-blue-light,
+.dx-color-scheme-saas-light,
+.dx-color-scheme-lime-light,
+.dx-color-scheme-orange-light,
+.dx-color-scheme-purple-light,
+.dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+.dx-color-scheme-dark,
+.dx-color-scheme-darkviolet,
+.dx-color-scheme-darkmoon,
+.dx-color-scheme-blue-dark,
+.dx-color-scheme-saas-dark,
+.dx-color-scheme-lime-dark,
+.dx-color-scheme-orange-dark,
+.dx-color-scheme-purple-dark,
+.dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+.dx-scheduler-header .dx-toolbar .dx-button,
+.dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-.dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-.dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -59,13 +86,13 @@
   left: 3px;
 }
 
-.avatar[title="Sandra Johnson"] img {
+.avatar[title="Greta Sims"] img {
   position: relative;
   width: 126px;
   height: 130px;
   object-fit: contain;
   top: 5px;
-  left: 3px;
+  left: -7px;
 }
 
 .name {
@@ -76,20 +103,23 @@
 }
 
 .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 
@@ -135,4 +165,3 @@
 .training-background-2 {
   background-image: url("../../../../images/gym/icon-fitball.png");
 }
-
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js
index cd9dd1b7bdd1..24f97380ef38 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js
@@ -17,7 +17,7 @@ const App = () => (
     views={views}
     defaultCurrentView="month"
     defaultCurrentDate={currentDate}
-    height={600}
+    height={710}
     showAllDayPanel={true}
     firstDayOfWeek={1}
     startDayHour={8}
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
index bb2bf5fdad09..2ae3c1170144 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
@@ -82,15 +82,15 @@ export const employees = [
   {
     text: 'John Heart',
     id: 1,
-    color: 'rgba(50, 134, 56, 1)',
+    color: 'var(--background-color-1)',
     avatar: '../../../../images/employees/19.png',
     age: 27,
     discipline: 'ABS, Fitball, StepFit',
   },
   {
-    text: 'Sandra Johnson',
+    text: 'Greta Sims',
     id: 2,
-    color: 'rgba(194, 81, 0, 1)',
+    color: 'var(--background-color-2)',
     avatar: '../../../../images/employees/31.png',
     age: 25,
     discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
index 9c4075d10dc2..1bc06dcb204d 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
@@ -3,33 +3,60 @@
   position: relative;
 }
 
+.dx-color-scheme-light,
+.dx-color-scheme-carmine,
+.dx-color-scheme-softblue,
+.dx-color-scheme-blue-light,
+.dx-color-scheme-saas-light,
+.dx-color-scheme-lime-light,
+.dx-color-scheme-orange-light,
+.dx-color-scheme-purple-light,
+.dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+.dx-color-scheme-dark,
+.dx-color-scheme-darkviolet,
+.dx-color-scheme-darkmoon,
+.dx-color-scheme-blue-dark,
+.dx-color-scheme-saas-dark,
+.dx-color-scheme-lime-dark,
+.dx-color-scheme-orange-dark,
+.dx-color-scheme-purple-dark,
+.dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+.dx-scheduler-header .dx-toolbar .dx-button,
+.dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-.dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-.dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -59,13 +86,13 @@
   left: 3px;
 }
 
-.avatar[title="Sandra Johnson"] img {
+.avatar[title="Greta Sims"] img {
   position: relative;
   width: 126px;
   height: 130px;
   object-fit: contain;
   top: 5px;
-  left: 3px;
+  left: -7px;
 }
 
 .name {
@@ -76,20 +103,23 @@
 }
 
 .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 
@@ -135,4 +165,3 @@
 .training-background-2 {
   background-image: url("../../../../images/gym/icon-fitball.png");
 }
-
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
index 4aeb1819ab51..2bcfe477aed7 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
@@ -5,7 +5,7 @@
     :current-date="currentDate"
     :views="views"
     :groups="groups"
-    :height="600"
+    :height="710"
     :show-all-day-panel="true"
     :first-day-of-week="1"
     :start-day-hour="8"
@@ -51,33 +51,60 @@ const dataSource = data;
   position: relative;
 }
 
+.dx-color-scheme-light,
+.dx-color-scheme-carmine,
+.dx-color-scheme-softblue,
+.dx-color-scheme-blue-light,
+.dx-color-scheme-saas-light,
+.dx-color-scheme-lime-light,
+.dx-color-scheme-orange-light,
+.dx-color-scheme-purple-light,
+.dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+.dx-color-scheme-dark,
+.dx-color-scheme-darkviolet,
+.dx-color-scheme-darkmoon,
+.dx-color-scheme-blue-dark,
+.dx-color-scheme-saas-dark,
+.dx-color-scheme-lime-dark,
+.dx-color-scheme-orange-dark,
+.dx-color-scheme-purple-dark,
+.dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+.dx-scheduler-header .dx-toolbar .dx-button,
+.dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
+  color: var(--disabled-color) !important;
 }
 
-.dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
+.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
 }
 
-.dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+.dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
index ca4137464932..49ecd35505e3 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
@@ -49,6 +49,10 @@ function getCurrentTraining(date, employeeID) {
   background-repeat: no-repeat;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 .employee-1 {
   background-color: rgba(55, 126, 58, 0.08);
 }
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
index 65e84db905d5..f2781ea77653 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
@@ -47,13 +47,13 @@ withDefaults(defineProps<{
   left: 3px;
 }
 
-.avatar[title="Sandra Johnson"] img {
+.avatar[title="Greta Sims"] img {
   position: relative;
   width: 126px;
   height: 130px;
   object-fit: contain;
   top: 5px;
-  left: 3px;
+  left: -7px;
 }
 
 .name {
@@ -64,20 +64,23 @@ withDefaults(defineProps<{
 }
 
 .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
index e808c80ef82a..a4c5b52fa50b 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
@@ -1,14 +1,14 @@
 export const employees = [{
   text: 'John Heart',
   id: 1,
-  color: 'rgba(50, 134, 56, 1)',
+  color: 'var(--background-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: 'rgba(194, 81, 0, 1)',
+  color: 'var(--background-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
index 18ed81af5b28..d753b921c9d5 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
@@ -1,14 +1,14 @@
 const employees = [{
   text: 'John Heart',
   id: 1,
-  color: 'rgba(50, 134, 56, 1)',
+  color: 'var(--background-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: 'rgba(194, 81, 0, 1)',
+  color: 'var(--background-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/index.js b/apps/demos/Demos/Scheduler/Overview/jQuery/index.js
index 3e367a6c7f94..bead8561ab16 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/index.js
@@ -9,7 +9,7 @@ $(() => {
     startDayHour: 8,
     endDayHour: 18,
     showAllDayPanel: false,
-    height: 600,
+    height: 710,
     groups: ['employeeID'],
     resources: [
       {
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
index b0d902880294..1bc06dcb204d 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
@@ -3,33 +3,60 @@
   position: relative;
 }
 
+.dx-color-scheme-light,
+.dx-color-scheme-carmine,
+.dx-color-scheme-softblue,
+.dx-color-scheme-blue-light,
+.dx-color-scheme-saas-light,
+.dx-color-scheme-lime-light,
+.dx-color-scheme-orange-light,
+.dx-color-scheme-purple-light,
+.dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+.dx-color-scheme-dark,
+.dx-color-scheme-darkviolet,
+.dx-color-scheme-darkmoon,
+.dx-color-scheme-blue-dark,
+.dx-color-scheme-saas-dark,
+.dx-color-scheme-lime-dark,
+.dx-color-scheme-orange-dark,
+.dx-color-scheme-purple-dark,
+.dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+.dx-scheduler-header .dx-toolbar .dx-button,
+.dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-.dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-.dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -59,13 +86,13 @@
   left: 3px;
 }
 
-.avatar[title="Sandra Johnson"] img {
+.avatar[title="Greta Sims"] img {
   position: relative;
   width: 126px;
   height: 130px;
   object-fit: contain;
   top: 5px;
-  left: 3px;
+  left: -7px;
 }
 
 .name {
@@ -76,20 +103,23 @@
 }
 
 .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }