diff --git a/packages/core-app-api/src/app/App.test.tsx b/packages/core-app-api/src/app/App.test.tsx
index 14ec71cb36..6fc1d96fd8 100644
--- a/packages/core-app-api/src/app/App.test.tsx
+++ b/packages/core-app-api/src/app/App.test.tsx
@@ -33,6 +33,7 @@ import {
   createRoutableExtension,
 } from '@backstage/core-plugin-api';
 import { generateBoundRoutes, PrivateAppImpl } from './App';
+import { AppThemeProvider } from './AppThemeProvider';
 
 describe('generateBoundRoutes', () => {
   it('runs happy path', () => {
@@ -160,6 +161,7 @@ describe('Integration Test', () => {
     Progress: () => null,
     Router: BrowserRouter,
     ErrorBoundaryFallback: () => null,
+    ThemeProvider: AppThemeProvider,
   };
 
   it('runs happy paths', async () => {
diff --git a/packages/core-app-api/src/app/createApp.test.tsx b/packages/core-app-api/src/app/createApp.test.tsx
index 8c16dfe45e..68d22997be 100644
--- a/packages/core-app-api/src/app/createApp.test.tsx
+++ b/packages/core-app-api/src/app/createApp.test.tsx
@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
-import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { renderWithEffects } from '@backstage/test-utils';
+import React, { PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { defaultConfigLoader, OptionallyWrapInRouter } from './createApp';
+import {
+  defaultConfigLoader,
+  OptionallyWrapInRouter,
+  createApp,
+} from './createApp';
+import { AppThemeProvider } from './AppThemeProvider';
 
 (process as any).env = { NODE_ENV: 'test' };
 const anyEnv = process.env as any;
@@ -115,3 +121,24 @@ describe('OptionallyWrapInRouter', () => {
     expect(getByText('Test')).toBeInTheDocument();
   });
 });
+
+describe('Optional ThemeProvider', () => {
+  it('should render app with user-provided ThemeProvider', async () => {
+    const components = {
+      NotFoundErrorPage: () => null,
+      BootErrorPage: () => null,
+      Progress: () => null,
+      Router: MemoryRouter,
+      ErrorBoundaryFallback: () => null,
+      ThemeProvider: ({ children }: PropsWithChildren<{}>) => (
+        <main role="main">{children}</main>
+      ),
+    };
+
+    const App = createApp({ components }).getProvider();
+
+    await renderWithEffects(<App />);
+
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+});