11.11. Loading a custom Developer Hub theme by using a dynamic plugin

Procedure

1. Export a theme provider function in your dynamic plugin, for example:

   Sample myTheme.ts fragment

   import { lightTheme } from './lightTheme'; // some custom theme
   import { UnifiedThemeProvider } from '@backstage/theme';
   export const lightThemeProvider = ({ children }: { children: ReactNode }) => (
     <UnifiedThemeProvider theme={lightTheme} children={children} />
   );

   For more information about creating a custom theme, see Backstage documentation - Creating a Custom Theme.

2. Configure Developer Hub to load the theme in the UI by using the themes configuration field:

   app-config.yaml fragment

   dynamicPlugins:
     frontend:
       example.my-custom-theme-plugin:
         themes:
           - id: light
             title: Light
             variant: light
             icon: someIconReference
             importName: lightThemeProvider

   id

   Set your theme ID by specifying the desired value. Optionally, override the default Developer Hub themes by using the following ID values: light to replace the default light theme, or dark to replace the default dark theme.