diff --git a/packages/app-defaults/src/defaults/themes.tsx b/packages/app-defaults/src/defaults/themes.tsx
index 397c160168..10368bd3bc 100644
--- a/packages/app-defaults/src/defaults/themes.tsx
+++ b/packages/app-defaults/src/defaults/themes.tsx
@@ -15,11 +15,12 @@
  */
 
 import React from 'react';
-import { darkTheme, lightTheme } from '@backstage/theme';
+import {
+  UnifiedThemeProvider,
+  themes as builtinThemes,
+} from '@backstage/theme';
 import DarkIcon from '@material-ui/icons/Brightness2';
 import LightIcon from '@material-ui/icons/WbSunny';
-import { ThemeProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
 import { AppTheme } from '@backstage/core-plugin-api';
 
 export const themes: AppTheme[] = [
@@ -29,9 +30,7 @@ export const themes: AppTheme[] = [
     variant: 'light',
     icon: <LightIcon />,
     Provider: ({ children }) => (
-      <ThemeProvider theme={lightTheme}>
-        <CssBaseline>{children}</CssBaseline>
-      </ThemeProvider>
+      <UnifiedThemeProvider theme={builtinThemes.light} children={children} />
     ),
   },
   {
@@ -40,9 +39,7 @@ export const themes: AppTheme[] = [
     variant: 'dark',
     icon: <DarkIcon />,
     Provider: ({ children }) => (
-      <ThemeProvider theme={darkTheme}>
-        <CssBaseline>{children}</CssBaseline>
-      </ThemeProvider>
+      <UnifiedThemeProvider theme={builtinThemes.dark} children={children} />
     ),
   },
 ];