Uploaded image for project: 'Red Hat Internal Developer Platform'
  1. Red Hat Internal Developer Platform
  2. RHIDP-3826

Loading a custom Backstage theme from a dynamic plugin

Prepare for Y ReleasePrepare for Z ReleaseRemove QuarterXMLWordPrintable

    • Icon: Epic Epic
    • Resolution: Done
    • Icon: Undefined Undefined
    • 1.3
    • None
    • Dynamic plugins
    • None
    • Provide the ability to load a custom Backstage theme from a dynamic plugin
    • False
    • Hide

      None

      Show
      None
    • False
    • RHIDP-3825Provide the ability to load a custom Backstage theme from a dynamic plugin
    • To Do
    • RHIDP-3825 - Provide the ability to load a custom Backstage theme from a dynamic plugin
    • QE Needed, Docs Needed, TE Needed, Customer Facing, PX Needed
    • 0% To Do, 0% In Progress, 100% Done
    • Hide
      With this update, 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:
      +
      [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.


      This update also introduced the ability to override core API service factories from a dynamic plugin, which can be helpful for more specialized use cases such as providing a custom ScmAuth configuration for the {product-short} frontend.
      Show
      With this update, 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: + [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. This update also introduced the ability to override core API service factories from a dynamic plugin, which can be helpful for more specialized use cases such as providing a custom ScmAuth configuration for the {product-short} frontend.
    • Enhancement
    • Done

      Provide a way for a dynamic plugin to export a theme provider function.

      Provide a method to configure the frontend to supply a theme provider function exported from a dynamic plugin to be picked up by the createApp API.

      Expose the configuration items needed to display the theme properly to the user such as:

      id - the internal ID of the theme
      title - the user visible name of the theme
      icon - the icon that should be displayed next to the theme name
      variant - the variation of the theme either "light" or "dark"
      importName - the name of the exported theme provider function

      So for example a theme configuration could look something like:

      dynamicPlugins: 
  frontend: 
    internal.backstage-plugin-test-backstage-theme: 
      appIcons: 
        - name: lightIcon
          importName: LightIcon
        - name: darkIcon
          importName: DarkIcon
      themes: 
        - id: light  # Using 'light' overrides the app-provided light theme
          title: Test Light Theme
          variant: light
          icon: lightIcon
          importName: lightThemeProvider
        - id: dark  # Using 'dark' overrides the app-provided dark theme
          title: Test Dark Theme
          variant: dark
          icon: darkIcon
          importName: darkThemeProvider

      Provide some kind of example dynamic plugin to try this functionality out

            stlewis_2 Stan Lewis
            stlewis_2 Stan Lewis
            RHIDP - Dynamic Plugins
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: