Merge pull request #6541 from AmericanAirlines/add-theme-to-dev-app

chore(create dev app): custom theme on devApp for single plugin

.changeset/wild-fishes-suffer.md

@@ -0,0 +1,5 @@
+---
+'@backstage/dev-utils': patch
+---
+
+Allow custom theme for dev app.

packages/dev-utils/api-report.md

@@ -6,6 +6,7 @@
 /// <reference types="react" />
 
 import { ApiFactory } from '@backstage/core-plugin-api';
+import { AppTheme } from '@backstage/core-plugin-api';
 import { ComponentType } from 'react';
 import { createPlugin } from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';

packages/dev-utils/src/devApp/render.tsx

@@ -37,6 +37,7 @@ import {
 import {
   AnyApiFactory,
   ApiFactory,
+  AppTheme,
   attachComponentData,
   configApiRef,
   createApiFactory,
@@ -79,6 +80,7 @@ class DevAppBuilder {
   private readonly sidebarItems = new Array<JSX.Element>();
 
   private defaultPage?: string;
+  private themes?: Array<AppTheme>;
 
   /**
    * Register one or more plugins to render in the dev app
@@ -144,6 +146,14 @@ class DevAppBuilder {
     return this;
   }
 
+  /**
+   * Adds an array of themes to overide the default theme.
+   */
+  addThemes(themes: AppTheme[]) {
+    this.themes = themes;
+    return this;
+  }
+
   /**
    * Build a DevApp component using the resources registered so far
    */
@@ -166,6 +176,7 @@ class DevAppBuilder {
     const app = createApp({
       apis,
       plugins: this.plugins,
+      themes: this.themes,
       bindRoutes: ({ bind }) => {
         for (const plugin of this.plugins ?? []) {
           const targets: Record<string, RouteRef<any>> = {};