diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx
index 950f57668e..945cb20d2d 100644
--- a/packages/core-components/src/components/Avatar/Avatar.tsx
+++ b/packages/core-components/src/components/Avatar/Avatar.tsx
@@ -24,19 +24,18 @@ import { extractInitials, stringToColor } from './utils';
 export type AvatarClassKey = 'avatar';
 
 const useStyles = makeStyles(
-  (theme: Theme) =>
-    createStyles({
-      avatar: {
-        width: '4rem',
-        height: '4rem',
-        color: '#fff',
-      },
-      avatarText: {
-        fontWeight: theme.typography.fontWeightBold,
-        letterSpacing: '1px',
-        textTransform: 'uppercase',
-      },
-    }),
+  (theme: Theme) => ({
+    avatar: {
+      width: '4rem',
+      height: '4rem',
+      color: theme.palette.common.white,
+    },
+    avatarText: {
+      fontWeight: theme.typography.fontWeightBold,
+      letterSpacing: '1px',
+      textTransform: 'uppercase',
+    },
+  }),
   { name: 'BackstageAvatar' },
 );
 
diff --git a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx
index 1910d6e7fd..6b336f5489 100644
--- a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx
@@ -54,7 +54,8 @@ const useStyles = makeStyles<BackstageTheme>(
     code: {
       borderRadius: 6,
       margin: `${theme.spacing(2)}px 0px`,
-      background: theme.palette.type === 'dark' ? '#444' : '#fff',
+      background:
+        theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
     },
   }),
   { name: 'BackstageMissingAnnotationEmptyState' },
diff --git a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
index b967ee0a9f..92c10497f4 100644
--- a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
+++ b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
@@ -41,7 +41,7 @@ export type FeatureCalloutCircleClassKey =
   | 'text';
 
 const useStyles = makeStyles(
-  {
+  theme => ({
     '@keyframes pulsateSlightly': {
       '0%': { transform: 'scale(1.0)' },
       '100%': { transform: 'scale(1.1)' },
@@ -78,7 +78,7 @@ const useStyles = makeStyles(
       height: '100%',
       backgroundColor: 'transparent',
       borderRadius: '100%',
-      border: '2px solid white',
+      border: `2px solid ${theme.palette.common.white}`,
       zIndex: 2001,
       transformOrigin: 'center center',
       animation:
@@ -86,10 +86,10 @@ const useStyles = makeStyles(
     },
     text: {
       position: 'absolute',
-      color: 'white',
+      color: theme.palette.common.white,
       zIndex: 2003,
     },
-  },
+  }),
   { name: 'BackstageFeatureCalloutCircular' },
 );
 
diff --git a/packages/core-components/src/components/Lifecycle/Lifecycle.tsx b/packages/core-components/src/components/Lifecycle/Lifecycle.tsx
index f0bbeaa7bd..f6f4c3cd3e 100644
--- a/packages/core-components/src/components/Lifecycle/Lifecycle.tsx
+++ b/packages/core-components/src/components/Lifecycle/Lifecycle.tsx
@@ -26,9 +26,9 @@ type Props = CSS.Properties & {
 export type LifecycleClassKey = 'alpha' | 'beta';
 
 const useStyles = makeStyles(
-  {
+  theme => ({
     alpha: {
-      color: '#ffffff',
+      color: theme.palette.common.white,
       fontFamily: 'serif',
       fontWeight: 'normal',
       fontStyle: 'italic',
@@ -39,7 +39,7 @@ const useStyles = makeStyles(
       fontWeight: 'normal',
       fontStyle: 'italic',
     },
-  },
+  }),
   { name: 'BackstageLifecycle' },
 );
 
diff --git a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx
index be6c0c6531..d2b11f9a3b 100644
--- a/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx
+++ b/packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx
@@ -24,6 +24,7 @@ import ListItemText, {
 } from '@material-ui/core/ListItemText';
 import Popover from '@material-ui/core/Popover';
 import MoreVert from '@material-ui/icons/MoreVert';
+import { useTheme } from '@material-ui/core/styles';
 
 /**
  * @public
@@ -73,6 +74,11 @@ export type HeaderActionMenuProps = {
  * @public
  */
 export function HeaderActionMenu(props: HeaderActionMenuProps) {
+  const {
+    palette: {
+      common: { white },
+    },
+  } = useTheme();
   const { actionItems } = props;
   const [open, setOpen] = React.useState(false);
   const anchorElRef = React.useRef(null);
@@ -84,7 +90,7 @@ export function HeaderActionMenu(props: HeaderActionMenuProps) {
         data-testid="header-action-menu"
         ref={anchorElRef}
         style={{
-          color: 'white',
+          color: white,
           height: 56,
           width: 56,
           marginRight: -4,
diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
index cc61a6a063..949148d7a1 100644
--- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
+++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx
@@ -80,7 +80,7 @@ const useStyles = makeStyles<
     title: {
       fontSize: theme.typography.h5.fontSize,
       fontWeight: theme.typography.fontWeightMedium,
-      color: '#FFF',
+      color: theme.palette.common.white,
       padding: theme.spacing(2.5),
       [theme.breakpoints.down('xs')]: {
         display: 'none',
diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx
index 5fdd29f203..b08647d335 100644
--- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx
+++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx
@@ -35,7 +35,8 @@ const useStyles = makeStyles<BackstageTheme>(
       height: 48,
       width: '100%',
       '&:hover': {
-        background: '#6f6f6f',
+        background:
+          theme.palette.navigation.navItem?.hoverBackground || '#6f6f6f',
         color: theme.palette.navigation.selectedColor,
       },
       display: 'flex',
@@ -52,7 +53,7 @@ const useStyles = makeStyles<BackstageTheme>(
     },
     selected: {
       background: '#6f6f6f',
-      color: '#FFF',
+      color: theme.palette.common.white,
     },
     label: {
       margin: theme.spacing(1.75),
@@ -82,7 +83,8 @@ const useStyles = makeStyles<BackstageTheme>(
       width: '100%',
       padding: '10px 0 10px 0',
       '&:hover': {
-        background: '#6f6f6f',
+        background:
+          theme.palette.navigation.navItem?.hoverBackground || '#6f6f6f',
         color: theme.palette.navigation.selectedColor,
       },
     },
diff --git a/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx b/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
index da3bbb1e46..7c79dc8363 100644
--- a/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
+++ b/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
@@ -17,20 +17,20 @@ import React from 'react';
 import { makeStyles, TextField } from '@material-ui/core';
 import { Context } from '../ContextProvider';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
     gap: '1em',
     flexWrap: 'wrap',
   },
   label: {
-    color: '#fff !important',
+    color: `${theme.palette.common.white} !important`,
   },
   outline: {
-    color: '#fff !important',
-    borderColor: '#fff !important',
+    color: `${theme.palette.common.white} !important`,
+    borderColor: `${theme.palette.common.white} !important`,
   },
-});
+}));
 
 export const ApiBar = () => {
   const classes = useStyles();
diff --git a/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx b/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx
index 5b67fe844a..16321cd464 100644
--- a/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx
+++ b/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx
@@ -28,6 +28,7 @@ import {
 import { default as MuiAlert } from '@material-ui/lab/Alert';
 import { AzureSite } from '@backstage/plugin-azure-sites-common';
 import { Table, TableColumn, Link } from '@backstage/core-components';
+import { useTheme } from '@material-ui/core/styles';
 import FlashOnIcon from '@material-ui/icons/FlashOn';
 import PublicIcon from '@material-ui/icons/Public';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -38,18 +39,27 @@ import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import { DateTime } from 'luxon';
 import { useApi } from '@backstage/core-plugin-api';
 import { azureSiteApiRef } from '../../api';
+import { BackstageTheme } from '@backstage/theme';
 
 type States = 'Waiting' | 'Running' | 'Paused' | 'Failed' | 'Stopped';
 type Kinds = 'app' | 'functionapp';
 
 const State = ({ value }: { value: States }) => {
+  const {
+    palette: {
+      common: { black },
+      status: { ok, error },
+    },
+  } = useTheme<BackstageTheme>();
+
   const colorMap = {
     Waiting: '#dcbc21',
-    Running: 'green',
-    Paused: 'black',
-    Failed: 'red',
-    Stopped: 'black',
+    Running: ok,
+    Paused: black,
+    Failed: error,
+    Stopped: black,
   };
+
   return (
     <Box display="flex" alignItems="center">
       <Typography
diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx
index a875f542a7..b76877d395 100644
--- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx
+++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx
@@ -29,7 +29,8 @@ const useStyles = makeStyles<BackstageTheme>(
     code: {
       borderRadius: 6,
       margin: `${theme.spacing(2)}px 0px`,
-      background: theme.palette.type === 'dark' ? '#444' : '#fff',
+      background:
+        theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
     },
   }),
   { name: 'PluginCatalogEntityLabelsEmptyState' },
diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx
index 7f95a66700..c1d502dc78 100644
--- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx
+++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx
@@ -34,7 +34,8 @@ const useStyles = makeStyles<BackstageTheme>(
     code: {
       borderRadius: 6,
       margin: `${theme.spacing(2)}px 0px`,
-      background: theme.palette.type === 'dark' ? '#444' : '#fff',
+      background:
+        theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
     },
   }),
   { name: 'PluginCatalogEntityLinksEmptyState' },
diff --git a/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx b/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx
index e8e204ff9a..5aae7d4194 100644
--- a/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx
+++ b/plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx
@@ -20,32 +20,32 @@ import { Link } from '@backstage/core-components';
 import { Box, makeStyles, Typography } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 
-const letterStyle = {
-  color: 'white',
+const letterStyle = (theme: BackstageTheme) => ({
+  color: theme.palette.common.white,
   border: 0,
   borderRadius: '3px',
   fontSize: '40px',
   padding: '5px 20px',
-};
+});
 
 const fontSize = {
   fontSize: '25px',
 };
 
-const letterColor = (letter: string) => {
+const letterColor = (letter: string, theme: BackstageTheme) => {
   if (letter === 'A') {
-    return '#45d298';
+    return theme.palette.success.main || '#45d298';
   } else if (letter === 'B') {
-    return '#a5d86e';
+    return theme.palette.success.light || '#a5d86e';
   } else if (letter === 'C') {
-    return '#f1ce0c';
+    return theme.palette.warning.light || '#f1ce0c';
   } else if (letter === 'D') {
-    return '#f29141';
+    return theme.palette.warning.main || '#f29141';
   } else if (letter === 'F') {
-    return '#df5869';
+    return theme.palette.error.light || '#df5869';
   }
 
-  return '#45d298';
+  return theme.palette.success.main || '#45d298';
 };
 
 const useStyles = makeStyles<
@@ -54,7 +54,7 @@ const useStyles = makeStyles<
     maintainabilityLetter: string;
     testCoverageLetter: string;
   }
->({
+>(theme => ({
   spaceAround: {
     display: 'flex',
     justifyContent: 'space-around',
@@ -65,12 +65,12 @@ const useStyles = makeStyles<
     alignItems: 'center',
   },
   maintainabilityLetterColor: {
-    ...letterStyle,
-    backgroundColor: props => letterColor(props.maintainabilityLetter),
+    ...letterStyle(theme),
+    backgroundColor: props => letterColor(props.maintainabilityLetter, theme),
   },
   testCoverageLetterColor: {
-    ...letterStyle,
-    backgroundColor: props => letterColor(props.testCoverageLetter),
+    ...letterStyle(theme),
+    backgroundColor: props => letterColor(props.testCoverageLetter, theme),
   },
   fontSize: {
     ...fontSize,
@@ -82,7 +82,7 @@ const useStyles = makeStyles<
   paddingSides20: {
     padding: '0px 20px',
   },
-});
+}));
 
 export const CodeClimateTable = ({
   codeClimateData,
diff --git a/plugins/code-coverage/src/components/FileExplorer/CodeRow.tsx b/plugins/code-coverage/src/components/FileExplorer/CodeRow.tsx
index 7eb8ce0f29..c7dee55f2b 100644
--- a/plugins/code-coverage/src/components/FileExplorer/CodeRow.tsx
+++ b/plugins/code-coverage/src/components/FileExplorer/CodeRow.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
     width: '50px',
     borderRight: `1px solid ${theme.palette.grey[500]}`,
     textAlign: 'center',
-    color: 'white', // need to enforce this color since it needs to stand out against colored background
+    color: theme.palette.common.white, // need to enforce this color since it needs to stand out against colored background
     paddingLeft: theme.spacing(1),
     paddingRight: theme.spacing(1),
   },
diff --git a/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx b/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx
index ac132c5a56..2ca6987be7 100644
--- a/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx
+++ b/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({
     margin: 'auto',
     top: '2em',
     width: '80%',
-    border: '2px solid #000',
+    border: `2px solid ${theme.palette.common.black}`,
     boxShadow: theme.shadows[5],
     padding: theme.spacing(2, 4, 3),
     overflow: 'scroll',
diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
index fd1d5ba5fb..127bd193bf 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
@@ -64,7 +64,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    color: 'black',
+    color: theme.palette.common.black,
   },
   legend: {
     position: 'absolute',
diff --git a/plugins/explore/src/components/ToolCard/ToolCard.tsx b/plugins/explore/src/components/ToolCard/ToolCard.tsx
index 904db0c00b..dde8f97a54 100644
--- a/plugins/explore/src/components/ToolCard/ToolCard.tsx
+++ b/plugins/explore/src/components/ToolCard/ToolCard.tsx
@@ -41,7 +41,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
   lifecycle: {
     lineHeight: '0.8em',
-    color: 'white',
+    color: theme.palette.common.white,
   },
   ga: {
     backgroundColor: theme.palette.status.ok,
diff --git a/plugins/firehydrant/src/components/ServiceDetailsCard/ServiceDetailsCard.tsx b/plugins/firehydrant/src/components/ServiceDetailsCard/ServiceDetailsCard.tsx
index ed8bbf6a81..bc2dd46fef 100644
--- a/plugins/firehydrant/src/components/ServiceDetailsCard/ServiceDetailsCard.tsx
+++ b/plugins/firehydrant/src/components/ServiceDetailsCard/ServiceDetailsCard.tsx
@@ -66,7 +66,7 @@ const useStyles = makeStyles(theme => ({
   },
   buttonLink: {
     backgroundColor: '#3b2492',
-    color: '#FFF',
+    color: theme.palette.common.white,
     textTransform: 'none',
     '&:hover': {
       backgroundColor: '#614ab6',
diff --git a/plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx b/plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx
index dd4d743572..4e36eff55a 100644
--- a/plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx
+++ b/plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx
@@ -44,7 +44,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => {
       '& svg': {
         height: 16,
         width: 16,
-        background: '#fff',
+        background: theme.palette.common.white,
       },
     },
   };
diff --git a/plugins/git-release-manager/src/features/Stats/Info/InDepth/InDepth.tsx b/plugins/git-release-manager/src/features/Stats/Info/InDepth/InDepth.tsx
index b55b0a79b2..421b427470 100644
--- a/plugins/git-release-manager/src/features/Stats/Info/InDepth/InDepth.tsx
+++ b/plugins/git-release-manager/src/features/Stats/Info/InDepth/InDepth.tsx
@@ -21,6 +21,7 @@ import {
   Tooltip as MaterialTooltip,
   Typography,
 } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { BarChart, Bar, XAxis, YAxis, Legend, Tooltip } from 'recharts';
 
 import { AverageReleaseTime } from './AverageReleaseTime';
@@ -30,6 +31,12 @@ import { useGetReleaseTimes } from '../hooks/useGetReleaseTimes';
 import { useReleaseStatsContext } from '../../contexts/ReleaseStatsContext';
 
 export function InDepth() {
+  const {
+    palette: {
+      success,
+      common: { black },
+    },
+  } = useTheme();
   const { releaseStats } = useReleaseStatsContext();
   const { averageReleaseTime, progress, releaseCommitPairs, run } =
     useGetReleaseTimes();
@@ -112,9 +119,9 @@ export function InDepth() {
         >
           <XAxis type="number" />
           <YAxis dataKey="version" type="category" />
-          <Tooltip labelStyle={{ color: '#000', fontWeight: 'bold' }} />
+          <Tooltip labelStyle={{ color: black, fontWeight: 'bold' }} />
           <Legend />
-          <Bar dataKey="days" fill="#82ca9d" />
+          <Bar dataKey="days" fill={success.light} />
         </BarChart>
 
         {progress > 0 && progress < 100 && (
diff --git a/plugins/ilert/src/components/AlertsPage/StatusChip.tsx b/plugins/ilert/src/components/AlertsPage/StatusChip.tsx
index 55fe46d810..ac7147b3b2 100644
--- a/plugins/ilert/src/components/AlertsPage/StatusChip.tsx
+++ b/plugins/ilert/src/components/AlertsPage/StatusChip.tsx
@@ -17,28 +17,28 @@ import { Chip, withStyles } from '@material-ui/core';
 import React from 'react';
 import { ACCEPTED, Alert, PENDING, RESOLVED } from '../../types';
 
-const ResolvedChip = withStyles({
+const ResolvedChip = withStyles(theme => ({
   root: {
     backgroundColor: '#4caf50',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
-const AcceptedChip = withStyles({
+const AcceptedChip = withStyles(theme => ({
   root: {
     backgroundColor: '#ffb74d',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const PendingChip = withStyles({
+}))(Chip);
+const PendingChip = withStyles(theme => ({
   root: {
     backgroundColor: '#d32f2f',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
 export const alertStatusLabels = {
   [RESOLVED]: 'Resolved',
diff --git a/plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx b/plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx
index b386cb628b..966caea079 100644
--- a/plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx
+++ b/plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx
@@ -41,7 +41,8 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   code: {
     borderRadius: 6,
     margin: theme.spacing(2, 0),
-    background: theme.palette.type === 'dark' ? '#444' : '#fff',
+    background:
+      theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
   },
   header: {
     display: 'inline-block',
diff --git a/plugins/ilert/src/components/ILertCard/ILertCardHeaderStatus.tsx b/plugins/ilert/src/components/ILertCard/ILertCardHeaderStatus.tsx
index eb6ab91fd2..77db28a831 100644
--- a/plugins/ilert/src/components/ILertCard/ILertCardHeaderStatus.tsx
+++ b/plugins/ilert/src/components/ILertCard/ILertCardHeaderStatus.tsx
@@ -18,13 +18,13 @@ import Chip from '@material-ui/core/Chip';
 import { withStyles } from '@material-ui/core/styles';
 import { AlertSource } from '../../types';
 
-const MaintenanceChip = withStyles({
+const MaintenanceChip = withStyles(theme => ({
   root: {
     backgroundColor: '#92949c',
-    color: 'white',
+    color: theme.palette.common.white,
     marginTop: 8,
   },
-})(Chip);
+}))(Chip);
 
 export const ILertCardHeaderStatus = ({
   alertSource,
diff --git a/plugins/ilert/src/components/ServicesPage/StatusChip.tsx b/plugins/ilert/src/components/ServicesPage/StatusChip.tsx
index 873bfbfb28..1d2c89ec6c 100644
--- a/plugins/ilert/src/components/ServicesPage/StatusChip.tsx
+++ b/plugins/ilert/src/components/ServicesPage/StatusChip.tsx
@@ -24,42 +24,42 @@ import {
   UNDER_MAINTENANCE,
 } from '../../types';
 
-const OperationalChip = withStyles({
+const OperationalChip = withStyles(theme => ({
   root: {
     backgroundColor: '#388E3D',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
-const UnderMaintenanceChip = withStyles({
+const UnderMaintenanceChip = withStyles(theme => ({
   root: {
     backgroundColor: '#616161',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const DegradedChip = withStyles({
+}))(Chip);
+const DegradedChip = withStyles(theme => ({
   root: {
     backgroundColor: '#FBC02D',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const PartialOutageChip = withStyles({
+}))(Chip);
+const PartialOutageChip = withStyles(theme => ({
   root: {
     backgroundColor: '#F57C02',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const MajorOutageChip = withStyles({
+}))(Chip);
+const MajorOutageChip = withStyles(theme => ({
   root: {
     backgroundColor: '#D22F2E',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
 const serviceStatusLabels = {
   [OPERATIONAL]: 'Operational',
diff --git a/plugins/ilert/src/components/StatusPagePage/StatusChip.tsx b/plugins/ilert/src/components/StatusPagePage/StatusChip.tsx
index 5cd785c4cd..1eaffafd25 100644
--- a/plugins/ilert/src/components/StatusPagePage/StatusChip.tsx
+++ b/plugins/ilert/src/components/StatusPagePage/StatusChip.tsx
@@ -24,42 +24,42 @@ import {
   UNDER_MAINTENANCE,
 } from '../../types';
 
-const OperationalChip = withStyles({
+const OperationalChip = withStyles(theme => ({
   root: {
     backgroundColor: '#388E3D',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
-const UnderMaintenanceChip = withStyles({
+const UnderMaintenanceChip = withStyles(theme => ({
   root: {
     backgroundColor: '#616161',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const DegradedChip = withStyles({
+}))(Chip);
+const DegradedChip = withStyles(theme => ({
   root: {
     backgroundColor: '#FBC02D',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const PartialOutageChip = withStyles({
+}))(Chip);
+const PartialOutageChip = withStyles(theme => ({
   root: {
     backgroundColor: '#F57C02',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const MajorOutageChip = withStyles({
+}))(Chip);
+const MajorOutageChip = withStyles(theme => ({
   root: {
     backgroundColor: '#D22F2E',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
 const statusPageStatusLabels = {
   [OPERATIONAL]: 'Operational',
diff --git a/plugins/ilert/src/components/StatusPagePage/VisibilityChip.tsx b/plugins/ilert/src/components/StatusPagePage/VisibilityChip.tsx
index 04e8019d3d..90967e5483 100644
--- a/plugins/ilert/src/components/StatusPagePage/VisibilityChip.tsx
+++ b/plugins/ilert/src/components/StatusPagePage/VisibilityChip.tsx
@@ -17,21 +17,21 @@ import { Chip, withStyles } from '@material-ui/core';
 import React from 'react';
 import { PRIVATE, PUBLIC, StatusPage } from '../../types';
 
-const PrivateChip = withStyles({
+const PrivateChip = withStyles(theme => ({
   root: {
     backgroundColor: '#4caf50',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
-const PublicChip = withStyles({
+const PublicChip = withStyles(theme => ({
   root: {
     backgroundColor: '#ffb74d',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
 const statusPageVisibilityLabels = {
   [PUBLIC]: 'Public',
diff --git a/plugins/microsoft-calendar/src/components/AttendeeChip.tsx b/plugins/microsoft-calendar/src/components/AttendeeChip.tsx
index 67dd601da7..b3b5b98301 100644
--- a/plugins/microsoft-calendar/src/components/AttendeeChip.tsx
+++ b/plugins/microsoft-calendar/src/components/AttendeeChip.tsx
@@ -44,7 +44,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => {
       '& svg': {
         height: 16,
         width: 16,
-        background: '#fff',
+        background: theme.palette.common.white,
       },
     },
   };
diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
index dcbde9279a..cdac4196d4 100644
--- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
+++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { Box, Grid, MenuItem, Select } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { useApi, storageApiRef } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 import {
@@ -36,6 +37,11 @@ export const DashboardSnapshot = (props: {
   name: string;
   permalink: string;
 }) => {
+  const {
+    palette: {
+      common: { black },
+    },
+  } = useTheme();
   const { guid, name, permalink } = props;
   const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
   const storageApi = useApi(storageApiRef).forBucket('newrelic-dashboard');
@@ -99,7 +105,7 @@ export const DashboardSnapshot = (props: {
               {url ? (
                 <img
                   alt={`${name} Dashbord`}
-                  style={{ border: 'solid 1px black' }}
+                  style={{ border: `solid 1px ${black}` }}
                   src={url}
                 />
               ) : (
diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
index 567c7ad3bc..b130057fe3 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme: BackstageTheme) =>
       boxShadow: theme.shadows[2],
       borderRadius: '4px',
       padding: theme.spacing(2),
-      color: '#fff',
+      color: theme.palette.common.white,
       transition: `${theme.transitions.duration.standard}ms`,
       '&:hover': {
         boxShadow: theme.shadows[4],
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx
index 9e69fae68d..ca7648546e 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx
@@ -34,11 +34,11 @@ import {
   scaffolderListTaskRouteRef,
 } from '../../routes';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   button: {
-    color: 'white',
+    color: theme.palette.common.white,
   },
-});
+}));
 
 export type ScaffolderPageContextMenuProps = {
   editor?: boolean;
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 984e51f3b5..5e91e59679 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -102,7 +102,7 @@ const useStyles = makeStyles(theme => ({
     top: theme.spacing(0.5),
     right: theme.spacing(0.5),
     padding: '0.25rem',
-    color: '#fff',
+    color: theme.palette.common.white,
   },
 }));
 
diff --git a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx b/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx
index 3bca46af2a..6165d40e7c 100644
--- a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx
+++ b/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx
@@ -34,11 +34,11 @@ import {
   nextScaffolderListTaskRouteRef,
 } from '../routes';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   button: {
-    color: 'white',
+    color: theme.palette.common.white,
   },
-});
+}));
 
 export type ScaffolderPageContextMenuProps = {
   editor?: boolean;
diff --git a/plugins/shortcuts/src/ShortcutItem.tsx b/plugins/shortcuts/src/ShortcutItem.tsx
index 8ba1a96358..1d4e6a20ae 100644
--- a/plugins/shortcuts/src/ShortcutItem.tsx
+++ b/plugins/shortcuts/src/ShortcutItem.tsx
@@ -25,7 +25,7 @@ import { ShortcutApi } from './api';
 import { Shortcut } from './types';
 import { SidebarItem } from '@backstage/core-components';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     '&:hover #edit': {
       visibility: 'visible',
@@ -35,10 +35,10 @@ const useStyles = makeStyles({
     visibility: 'hidden',
   },
   icon: {
-    color: 'white',
+    color: theme.palette.common.white,
     fontSize: 16,
   },
-});
+}));
 
 const getIconText = (title: string) =>
   title.split(' ').length === 1
diff --git a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx b/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx
index b2d7c1290f..c114744a40 100644
--- a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx
+++ b/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx
@@ -24,7 +24,7 @@ export type Props = {
   y: number;
 };
 
-const useStyles = makeStyles<Theme>(() => ({
+const useStyles = makeStyles<Theme>(theme => ({
   bubble: {
     pointerEvents: 'none',
     userSelect: 'none',
@@ -42,7 +42,7 @@ const useStyles = makeStyles<Theme>(() => ({
     pointerEvents: 'none',
     userSelect: 'none',
     fontSize: '10px',
-    fill: '#fff',
+    fill: theme.palette.common.white,
   },
 }));
 
diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx
index 849b5157bd..829b9c7708 100644
--- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx
+++ b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx
@@ -33,12 +33,12 @@ export type Props = {
   onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
 };
 
-const useStyles = makeStyles<Theme>(() => ({
+const useStyles = makeStyles<Theme>(theme => ({
   text: {
     pointerEvents: 'none',
     userSelect: 'none',
     fontSize: '9px',
-    fill: '#fff',
+    fill: theme.palette.common.white,
     textAnchor: 'middle',
   },
 
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
index 4ca0350e7b..42b87326c6 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
@@ -73,7 +73,7 @@ const useStyles = makeStyles<Theme>(theme => ({
     userSelect: 'none',
     fontSize: '11px',
     background: '#6f6f6f',
-    color: '#FFF',
+    color: theme.palette.common.white,
   },
   entryLink: {
     pointerEvents: 'visiblePainted',
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx
index dcb75f4cc4..f7b4f2eff2 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx
@@ -19,6 +19,7 @@ import Helmet from 'react-helmet';
 
 import { Grid } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
+import { useTheme } from '@material-ui/core/styles';
 import CodeIcon from '@material-ui/icons/Code';
 
 import {
@@ -64,6 +65,11 @@ export type TechDocsReaderPageHeaderProps = PropsWithChildren<{
 export const TechDocsReaderPageHeader = (
   props: TechDocsReaderPageHeaderProps,
 ) => {
+  const {
+    palette: {
+      common: { white },
+    },
+  } = useTheme();
   const { children } = props;
   const addons = useTechDocsAddons();
   const configApi = useApi(configApiRef);
@@ -138,7 +144,7 @@ export const TechDocsReaderPageHeader = (
               container
               direction="column"
               alignItems="center"
-              style={{ color: '#fff' }}
+              style={{ color: white }}
             >
               <Grid style={{ padding: 0 }} item>
                 <CodeIcon style={{ marginTop: '-25px' }} />