diff --git a/src/components/MinimalWindow.js b/src/components/MinimalWindow.js
index 8a13804dcb..b046616924 100644
--- a/src/components/MinimalWindow.js
+++ b/src/components/MinimalWindow.js
@@ -49,7 +49,7 @@ export class MinimalWindow extends Component {
         }}
         aria-label={label && ariaLabel ? t('window', { label }) : null}
       >
-        <AppBar position="relative" color="default">
+        <AppBar position="relative" color="default" enableColorOnDark>
           <Toolbar
             disableGutters
             className={cn(ns('window-top-bar'))}
diff --git a/src/components/MiradorMenuButton.js b/src/components/MiradorMenuButton.js
index aac9935bfd..91beaf551b 100644
--- a/src/components/MiradorMenuButton.js
+++ b/src/components/MiradorMenuButton.js
@@ -21,7 +21,13 @@ export function MiradorMenuButton(props) {
   } = props;
 
   const button = (
-    <IconButton {...iconButtonProps} size="large">
+    <IconButton
+      {...iconButtonProps}
+      sx={{
+        fill: 'currentcolor',
+      }}
+      size="large"
+    >
       {badge
         ? (
           <Badge
diff --git a/src/components/WindowCanvasNavigationControls.js b/src/components/WindowCanvasNavigationControls.js
index 5acc901887..d591d2c116 100644
--- a/src/components/WindowCanvasNavigationControls.js
+++ b/src/components/WindowCanvasNavigationControls.js
@@ -33,7 +33,7 @@ export class WindowCanvasNavigationControls extends Component {
     return (
       <Paper
         square
-        sx={theme => ({
+        sx={(theme) => ({
           backgroundColor: alpha(theme.palette.background.paper, 0.5),
           bottom: 0,
           cursor: 'default',
diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index 78d2c469b4..2285ca95a8 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/src/components/WindowSideBarButtons.js
@@ -21,7 +21,7 @@ function TabButton({ t, value, ...tabProps }) {
         sx={{
           '&.Mui-selected': {
             borderRight: '2px solid',
-            borderRightColor: 'primary?.main',
+            borderRightColor: 'primary.main',
           },
           '&.MuiTab-root': {
             '&:active': {
@@ -149,7 +149,7 @@ export class WindowSideBarButtons extends Component {
             onKeyUp={this.handleKeyUp}
             t={t}
             icon={(
-              <Badge overlap="rectangular" sx={{ backgroundColor: 'notification.main' }} invisible={!hasAnnotations} variant="dot">
+              <Badge overlap="rectangular" sx={{ '.MuiBadge-badge': { backgroundColor: 'notification.main' } }} invisible={!hasAnnotations} variant="dot">
                 <AnnotationIcon />
               </Badge>
             )}
@@ -161,7 +161,7 @@ export class WindowSideBarButtons extends Component {
             onKeyUp={this.handleKeyUp}
             t={t}
             icon={(
-              <Badge overlap="rectangular" sx={{ backgroundColor: 'notification.main' }} invisible={!hasSearchResults} variant="dot">
+              <Badge overlap="rectangular" sx={{ '.MuiBadge-badge': { backgroundColor: 'notification.main' } }} invisible={!hasSearchResults} variant="dot">
                 <SearchIcon />
               </Badge>
             )}
@@ -173,7 +173,7 @@ export class WindowSideBarButtons extends Component {
             onKeyUp={this.handleKeyUp}
             t={t}
             icon={(
-              <Badge overlap="rectangular" sx={{ backgroundColor: 'notification.main' }} invisible={!hasCurrentLayers} variant="dot">
+              <Badge overlap="rectangular" sx={{ '.MuiBadge-badge': { backgroundColor: 'notification.main' } }} invisible={!hasCurrentLayers} variant="dot">
                 <LayersIcon />
               </Badge>
             )}
diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
index f6efcc9f0f..4699b6ffa1 100644
--- a/src/components/WindowTopBar.js
+++ b/src/components/WindowTopBar.js
@@ -31,7 +31,7 @@ export class WindowTopBar extends Component {
     } = this.props;
 
     return (
-      <AppBar position="relative" color="default">
+      <AppBar position="relative" color="default" enableColorOnDark>
         <nav aria-label={t('windowNavigation')}>
           <Toolbar
             disableGutters
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
index 55e56d7c95..29873d7cf0 100644
--- a/src/components/WorkspaceAdd.js
+++ b/src/components/WorkspaceAdd.js
@@ -195,7 +195,7 @@ export class WorkspaceAdd extends Component {
                 right: '0',
               })}
             >
-              <AppBar position="absolute" color="primary" onClick={() => (this.setAddResourcesVisibility(false))}>
+              <AppBar position="absolute" color="primary" enableColorOnDark onClick={() => (this.setAddResourcesVisibility(false))}>
                 <Toolbar variant="dense">
                   <StyledMiradorMenuButton
                     aria-label={t('closeAddResourceForm')}
diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js
index 94f6710d53..e9194b1cec 100644
--- a/src/components/WorkspaceControlPanel.js
+++ b/src/components/WorkspaceControlPanel.js
@@ -58,6 +58,7 @@ export class WorkspaceControlPanel extends Component {
         })}
         className={classNames(ns('workspace-control-panel'))}
         color="default"
+        enableColorOnDark
         position="absolute"
         component="nav"
         aria-label={t('workspaceNavigation')}