diff --git a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/progress-bar-cell.jsx b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/progress-bar-cell.jsx
index 55302d2c7a..c20829361b 100644
--- a/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/progress-bar-cell.jsx
+++ b/packages/dx-react-grid-demos/src/theme-sources/material-ui/components/progress-bar-cell.jsx
@@ -9,7 +9,7 @@ const styles = theme => ({
     paddingRight: theme.spacing.unit,
   },
   progressBar: {
-    backgroundColor: theme.palette.primary[300],
+    backgroundColor: theme.palette.primary.light,
     float: 'left',
     height: theme.spacing.unit,
   },
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx
index 2bce3e56f2..cd88c429ca 100644
--- a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx
@@ -19,7 +19,7 @@ const styles = theme => ({
   },
   resizeHandleLine: {
     position: 'absolute',
-    backgroundColor: theme.palette.primary[300],
+    backgroundColor: theme.palette.primary.light,
     height: '50%',
     width: '1px',
     top: '25%',
@@ -37,7 +37,7 @@ const styles = theme => ({
   resizeHandleActive: {
     '& $resizeHandleLine': {
       opacity: '1',
-      backgroundColor: theme.palette.primary[300],
+      backgroundColor: theme.palette.primary.light,
       height: 'calc(100% - 4px)',
       top: '2px',
     },