diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js
index 7aa210075b6b06c078e237855daadf4a841f88d6..4eb2c0eb39c34c6ad54e83de44ecdd50fef2f366 100644
--- a/src/components/ManifestForm.js
+++ b/src/components/ManifestForm.js
@@ -75,7 +75,7 @@ export class ManifestForm extends Component {
                 {t('cancel')}
               </Button>
             )}
-            <Button id="fetchBtn" type="submit" variant="contained" color="primary">
+            <Button id="fetchBtn" type="submit" variant="contained" color="secondary">
               {t('fetchManifest')}
             </Button>
           </Grid>
diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js
index 8ebcad834d121a3754dc3309234b304ce9a51bc7..8e64be531fb9c9eb4dfd4fb7bc0f5a0513da01c2 100644
--- a/src/components/ManifestListItem.js
+++ b/src/components/ManifestListItem.js
@@ -107,7 +107,7 @@ export class ManifestListItem extends React.Component {
                     }
                   </Grid>
                   <Grid item xs={8} sm={9}>
-                    <Typography component="span" variant="subtitle1" color="primary">
+                    <Typography component="span" variant="subtitle1" color="secondary">
                       {title || manifestId}
                     </Typography>
                   </Grid>
diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index 7ffc326f1cd10da672a6fb40e7f1e95f64816b39..d8faa976e5de8b5554bf9f137e30a98ad5623fc4 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/src/components/WindowSideBarButtons.js
@@ -37,7 +37,7 @@ export class WindowSideBarButtons extends Component {
           onClick={() => (toggleWindowSideBarPanel('info'))}
         >
           <InfoIcon
-            color={this.sideBarPanelCurrentlySelected('info') ? 'primary' : 'inherit'}
+            color={this.sideBarPanelCurrentlySelected('info') ? 'secondary' : 'inherit'}
           />
         </IconButton>
         <IconButton
@@ -49,7 +49,7 @@ export class WindowSideBarButtons extends Component {
           onClick={() => (toggleWindowSideBarPanel('canvas_navigation'))}
         >
           <CanvasIndexIcon
-            color={this.sideBarPanelCurrentlySelected('canvas_navigation') ? 'primary' : 'inherit'}
+            color={this.sideBarPanelCurrentlySelected('canvas_navigation') ? 'secondary' : 'inherit'}
           />
         </IconButton>
       </>
diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js
index ff0a3c41940cecdf354178901b149edb2eb19255..942745f7a46a777eab8ae3637e7f61ecb78fedc1 100644
--- a/src/components/WindowThumbnailSettings.js
+++ b/src/components/WindowThumbnailSettings.js
@@ -42,19 +42,19 @@ export class WindowThumbnailSettings extends Component {
         <RadioGroup aria-label={t('position')} name="position" value={thumbnailNavigationPosition} onChange={this.handleChange} row>
           <FormControlLabel
             value="off"
-            control={<Radio color="primary" icon={<ThumbnailsOffIcon />} checkedIcon={<ThumbnailsOffIcon />} />}
+            control={<Radio color="secondary" icon={<ThumbnailsOffIcon />} checkedIcon={<ThumbnailsOffIcon />} />}
             label={t('off')}
             labelPlacement="bottom"
           />
           <FormControlLabel
             value="bottom"
-            control={<Radio color="primary" icon={<ThumbnailNavigationBottomIcon />} checkedIcon={<ThumbnailNavigationBottomIcon />} />}
+            control={<Radio color="secondary" icon={<ThumbnailNavigationBottomIcon />} checkedIcon={<ThumbnailNavigationBottomIcon />} />}
             label={t('bottom')}
             labelPlacement="bottom"
           />
           <FormControlLabel
             value="right"
-            control={<Radio color="primary" icon={<ThumbnailNavigationRightIcon />} checkedIcon={<ThumbnailNavigationRightIcon />} />}
+            control={<Radio color="secondary" icon={<ThumbnailNavigationRightIcon />} checkedIcon={<ThumbnailNavigationRightIcon />} />}
             label={t('right')}
             labelPlacement="bottom"
           />
diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js
index 8b7d99a0d596830cd59da6de3e5e1b8e67bd9767..729b4ee0a232de4774e27430800f4c8028cf01af 100644
--- a/src/components/WindowViewSettings.js
+++ b/src/components/WindowViewSettings.js
@@ -42,13 +42,13 @@ export class WindowViewSettings extends Component {
         <RadioGroup aria-label={t('position')} name="position" value={windowViewType} onChange={this.handleChange} row>
           <FormControlLabel
             value="single"
-            control={<Radio color="primary" icon={<SingleIcon />} checkedIcon={<SingleIcon />} />}
+            control={<Radio color="secondary" icon={<SingleIcon />} checkedIcon={<SingleIcon />} />}
             label={t('single')}
             labelPlacement="bottom"
           />
           <FormControlLabel
             value="book"
-            control={<Radio color="primary" icon={<BookViewIcon />} checkedIcon={<BookViewIcon />} />}
+            control={<Radio color="secondary" icon={<BookViewIcon />} checkedIcon={<BookViewIcon />} />}
             label={t('book')}
             labelPlacement="bottom"
           />
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
index 20c8c96bfeaad837014c34216adf563ed2d05e64..5fa01594bc23c04bb818be9a7994d3313f5f8b71 100644
--- a/src/components/WorkspaceAdd.js
+++ b/src/components/WorkspaceAdd.js
@@ -56,7 +56,7 @@ export class WorkspaceAdd extends React.Component {
       <div className={ns('workspace-add')}>
         {manifestList}
 
-        <Fab variant="extended" disabled={addResourcesOpen} className={classes.fab} color="primary" onClick={() => (this.setAddResourcesVisibility(true))}>
+        <Fab variant="extended" disabled={addResourcesOpen} className={classes.fab} color="secondary" onClick={() => (this.setAddResourcesVisibility(true))}>
           <AddIcon />
           {t('addResource')}
         </Fab>
@@ -75,9 +75,9 @@ export class WorkspaceAdd extends React.Component {
           <Paper
             className={classes.form}
           >
-            <AppBar position="absolute" color="primary" onClick={() => (this.setAddResourcesVisibility(false))}>
+            <AppBar position="absolute" color="secondary" onClick={() => (this.setAddResourcesVisibility(false))}>
               <Toolbar>
-                <IconButton className={classes.menuButton} color="inherit" aria-label={t('closeMenu')}>
+                <IconButton className={classes.menuButton} color="secondary" aria-label={t('closeMenu')}>
                   <ExpandMoreIcon />
                 </IconButton>
                 <Typography variant="h2" noWrap color="inherit" className={classes.typographyBody}>
diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js
index 9fe12fef28889d93de10ceea74f270742390363f..c0d78eaf05b541f32a828c6cd2ab8fb5cb2834fb 100644
--- a/src/components/WorkspaceAddButton.js
+++ b/src/components/WorkspaceAddButton.js
@@ -19,7 +19,7 @@ export class WorkspaceAddButton extends Component {
     return (
       <ListItem>
         <Fab
-          color="primary"
+          color="secondary"
           id="addBtn"
           aria-label={isWorkspaceAddVisible ? t('closeWindow') : t('add')}
           className={classes.fab}