RHIDP-4567 - Provide the ability to load a custom Backstage theme from a dynamic plugin

Author: Gerry-Forde

modules/customization/proc-loading-custom-theme-using-dynamic-plugin.adoc

@@ -0,0 +1,41 @@
+// Module included in the following assemblies:
+// assembly-customize-rhdh-theme.adoc
+
+[id="proc-loading-custom-theme-using-dynamic-plugin-_{context}"]
+= Loading a custom {product-short} theme by using a dynamic plugin
+
+You can load a custom Backstage theme from a dynamic plugin.
+
+.Procedure
+
+. Export a theme provider function in the dynamic plugin, such as:
++
+[source,javascript]
+----
+import { lightTheme } from './lightTheme'; // some custom theme
+import { UnifiedThemeProvider } from '@backstage/theme';
+export const lightThemeProvider = ({ children }: { children: ReactNode }) => (
+  <UnifiedThemeProvider theme={lightTheme} children={children} />
+);
+----
+
+. Configure {product-short} to load the them in the UI by using the new `themes` configuration field:
++
+.Example `app-config-rhdh.yaml` file
+[source,yaml]
+----
+dynamicPlugins:
+  frontend:
+    example.my-custom-theme-plugin:
+      themes:
+        - id: light # <1>
+          title: Light
+          variant: light
+          icon: someIconReference
+          importName: lightThemeProvider
+----
+<1> Set your theme id. Optionally, override the default Developer Hub themes specifying following id value: `light` overrides the default light theme and `dark` overrides the default dark theme.
+
+.Verification
+
+* The theme is available in the "Settings" page.