frontend-app-api: add support for default app themes

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/frontend-app-api/src/createApp.tsx

@@ -32,13 +32,22 @@ import {
   readAppExtensionParameters,
 } from './wiring/parameters';
 import { RoutingProvider } from './routing/RoutingContext';
-import { ApiHolder, RouteRef } from '@backstage/core-plugin-api';
+import {
+  ApiHolder,
+  appThemeApiRef,
+  RouteRef,
+} from '@backstage/core-plugin-api';
 import { getAvailablePlugins } from './wiring/discovery';
 import {
   ApiFactoryRegistry,
   ApiProvider,
   ApiResolver,
+  AppThemeSelector,
 } from '@backstage/core-app-api';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { AppThemeProvider } from '../../core-app-api/src/app/AppThemeProvider';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { themes } from '../../app-defaults/src/defaults/themes';
 
 /** @public */
 export function createApp(options: { plugins: BackstagePlugin[] }): {
@@ -140,11 +149,13 @@ export function createApp(options: { plugins: BackstagePlugin[] }): {
         .filter(Boolean);
       return (
         <ApiProvider apis={apiHolder}>
-          <RoutingProvider routePaths={routePaths}>
-            {rootComponents.map((Component, i) => (
-              <Component key={i} />
-            ))}
-          </RoutingProvider>
+          <AppThemeProvider>
+            <RoutingProvider routePaths={routePaths}>
+              {rootComponents.map((Component, i) => (
+                <Component key={i} />
+              ))}
+            </RoutingProvider>
+          </AppThemeProvider>
         </ApiProvider>
       );
     },
@@ -169,6 +180,13 @@ function createApiHolder(coreExtension: ExtensionInstance): ApiHolder {
     factoryRegistry.register('default', factory);
   }
 
+  factoryRegistry.register('static', {
+    api: appThemeApiRef,
+    deps: {},
+    // TODO: add extension for registering themes
+    factory: () => AppThemeSelector.createWithStorage(themes),
+  });
+
   ApiResolver.validateFactories(factoryRegistry, factoryRegistry.getAllApis());
 
   return new ApiResolver(factoryRegistry);