diff --git a/src/containers/SidebarIndexTableOfContents.js b/src/containers/SidebarIndexTableOfContents.js
index 6d0d7d771eaedfa1f278fd613bfd598741d82320..98caa554c90d31bf077dc7169a1b209a0bd28fbe 100644
--- a/src/containers/SidebarIndexTableOfContents.js
+++ b/src/containers/SidebarIndexTableOfContents.js
@@ -2,7 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { SidebarIndexTableOfContents } from '../components/SidebarIndexTableOfContents';
 import {
@@ -65,7 +65,7 @@ const styles = theme => ({
     },
   },
   visibleNode: {
-    backgroundColor: fade(theme.palette.highlights.primary, 0.35),
+    backgroundColor: alpha(theme.palette.highlights.primary, 0.35),
     display: 'inline',
   },
 });
diff --git a/src/containers/WindowAuthenticationBar.js b/src/containers/WindowAuthenticationBar.js
index 881bf419a1423289b504995b616cb96270366050..3b42a93aa7f44067e0cdc09958a20a90c4059b66 100644
--- a/src/containers/WindowAuthenticationBar.js
+++ b/src/containers/WindowAuthenticationBar.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar';
 
@@ -13,7 +13,7 @@ import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar';
 const styles = theme => ({
   buttonInvert: {
     '&:hover': {
-      backgroundColor: fade(
+      backgroundColor: alpha(
         theme.palette.secondary.contrastText, 1 - theme.palette.action.hoverOpacity,
       ),
     },
diff --git a/src/containers/WindowCanvasNavigationControls.js b/src/containers/WindowCanvasNavigationControls.js
index c823351483e99ae53e6747e443f9436898067066..8028c13df02bf98720c722060c945e7cd2042281 100644
--- a/src/containers/WindowCanvasNavigationControls.js
+++ b/src/containers/WindowCanvasNavigationControls.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withSize } from 'react-sizeme';
 import { withStyles } from '@material-ui/core';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls';
@@ -28,7 +28,7 @@ const styles = theme => ({
     flexDirection: 'column',
   },
   controls: {
-    backgroundColor: fade(theme.palette.background.paper, 0.5),
+    backgroundColor: alpha(theme.palette.background.paper, 0.5),
     bottom: 0,
     position: 'absolute',
     width: '100%',