Chapter 9. Customizing Red Hat Developer Hub appearance

Procedure

1. From the Developer Hub web console, click Settings.

2. From the Appearance panel, click LIGHT THEME, DARK THEME, or AUTO to change the theme mode.

   

Procedure

1. Customize the main menu items using the following steps:

   1. Open the app-config.yaml file.
   2. To customize the order and parent-child relationships for the main menu items, use the dynamicPlugins.frontend.default.main-menu-items.menuItems field.
   3. For dynamic plugin menu items, use the dynamicPlugins.frontend.<package_name>.menuItems field.

   Example app-config.yaml file

   dynamicPlugins:
     frontend:
       default.main-menu-items:
           menuItems:
             default.home:
               title: Home
               icon: home
               priority: 100
             default.my-group:
               title: My Group
               icon: group
               priority: 90
             default.catalog:
               title: Catalog
               icon: category
               to: catalog
               priority: 80
             default.apis:
               title: APIs
               icon: extension
               to: api-docs
               priority: 70
             default.learning-path:
               title: Learning Paths
               icon: school,
               to: learning-paths
               priority: 60
             default.create:
               title: Create
               icon: add
               to: create
               priority: 50

   Procedure

   1. To configure a dynamic plugin menu item, update the menuItems section of your <plugin_name> plugin to your app-config.yaml file. For example:

      dynamicPlugins:
        frontend:
          _<plugin_name>_: 1
            menuItems:
              <menu_item_name>: 2
                icon: # home | group | category | extension | school | _<my_icon>_ 3
                title: _<plugin_page_title>_ 4
                priority: 10 5
                parent: favorites 6

      1

      <plugin_name>: Enter the plugin name. This name is the same as the scalprum.name key in the package.json file.

      2

      <menu_item_name>: Enter a unique name in the main sidebar navigation for either a standalone menu item or a parent menu item. If this field specifies a plugin menu item, the name of the menu item must match the name using in the corresponding path in dynamicRoutes. For example, if dynamicRoutes defines path: /my-plugin, then menu_item_name must be defined as my-plugin.

      3

      icon: (Optional) Enter the icon name. You can use any of the following icons:

      • Default icons, such as home, group, category, extension, and school. To use default icons, set the icon as an (" ") empty string.
      • A custom icon, where <my_icon> specifies the name of your custom icon
      • An SVG icon, such as: icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">…​</svg>
      • An HTML image, such as: icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png

      4

      title: (Optional) Enter the menu item title. Omit it when the title is already specified in the dynamicRoutes configuration under menuItem.text. To hide the title from the sidebar, set the title as an (" ") empty string.

      5

      priority: (Optional) Sets the order in which menu items appear in the sidebar. The default priority is 0, which places the item at the bottom of the list. A higher priority value places the item higher in the sidebar. You can define this field for each section.

      6

      parent: (Optional) Enter the parent menu item under which the current item is nested. If this field is used, the parent menu item must be defined elsewhere in the menuItems configuration of any enabled plugin. You can define this field for each section.

      Example menuItems configuration

      dynamicPlugins:
        frontend:
          _<package_name>_:
            dynamicRoutes:
              - path: /my-plugin
                module: CustomModule
                importName: FooPluginPage
                menuItem:
                  icon: fooIcon
                  text: Foo Plugin Page
            menuItems:
              my-plugin: 1
                priority: 10 2
                parent: favorites 3
              favorites: 4
                icon: favorite 5
                title: Favorites 6
                priority: 100 7

      1

      my-plugin: Matches the value of the path field in dynamicRoutes.

      2

      priority: Controls order of plugins under the parent menu item.

      3

      parent: Nests this plugin under the favorites parent menu item.

      4

      favorites: Configuration for the parent menu item.

      5

      icon: Displays the favorite icon from the RHDH system icons.

      6

      title: Displays the title name for the parent menu item.

      7

      priority: Order of the favourites menu item in the sidebar.

   2. To modify a main menu item or add a custom menu item, add a section to the default.main-menu-items > menuItems section in your app-config.yaml file. Use the default. prefix to identify the key as a main menu item.

      dynamicPlugins:
        frontend:
          default.main-menu-items:
            menuItems:
              default._<menu_group_parent_item_name>_: 1
                icon: # home | group | category | extension | school | _<my_icon>_ 2
                title: _<menu_group_parent_title>_ 3
                priority: 10 4
              default._<menu_item_name>_: 5
                parent: _<menu_group_parent_item_name>_ 6
                icon:  # home | group | category | extension | school | _<my_icon>_ 7
                title: _<my_menu_title>_ 8
                to: _<path_to_the_menu_target_page>_ 9
                priority: 100 10

      1

      default.<menu_group_parent_item_name>: (Optional) Enter the menu group parent item name to configure static main menu items. If no default.<menu_item_name> has a parent value set, this field is not needed.

      2

      icon: Enter the menu icon. Required for parent menu items.

      3

      title: Enter the menu group title. Required for parent menu items.

      4

      priority: (Optional) Enter the order of this menu item within its menu level.

      5

      default.<menu_item_name>: Enter the menu item name for which you want to override the default value. Add the default. prefix to identify a main menu item.

      6

      parent: (Optional) Enter the parent menu item for this item. Required if <menu_item_name> is specified as the child of any menu items.

      7

      icon: (Optional) Enter the menu icon. To use the default icon, set the icon as an (" ") empty string.

      8

      title: (Optional) Enter the menu group title. Only required for adding a new custom main menu item. To hide a default main menu item title from the sidebar, set the title as an (" ") empty string.

      9

      to: (Optional) Enter the path that the menu item navigates to. If it is not set, it defaults to the home page.

      10

      priority: (Optional) Enter the order of this menu item within its menu level.

      Example mainItems configuration

      default.main-menu-items:
            menuItems:
              default.catalog:
                icon: category 1
                title: My Catalog
                priority: 5
              default.learning-path:
                title: '' # <2> to hide the learning path from default sidebar
              default.parentlist: 2
                title: Overview
                icon: bookmarks
              default.home:
                parent: default.parentlist 3
              default.references:
                title: References 4
                icon: school 5
                to: /references 6

      1

      icon: Specifies if you want to change the icon default menu item for the catalog.

      title: Specifies an empty string " " to hide the learning path from the default sidebar.

      2

      default.parentlist: Introduces the parent menu item.

      3

      parent: Nests home menu under the default.parentlist parent menu item.

      4

      title: Specifies a name for default.references

      5

      icon: Displays the school icon.

      6

      to: Redirects default.references to the /references page.

   = Customizing the theme mode color palettes for your Developer Hub instance

   You can customize the color palettes of the light and dark theme modes in your Developer Hub instance by configuring the light.palette and dark.palette parameters in the branding.theme section of the app-config.yaml file, as shown in the following example:

   app:
     branding:
       theme:
         light:
           palette:
             primary:
               main: <light_primary_color> 1
             navigation:
               indicator: <light_indicator_color> 2
           pageTheme:
             default:
               backgroundColor: [<light_background_color_1>, <light_background_color_2>] 3
         dark:
           palette:
             primary:
               main: <dark_primary_color> 4
             navigation:
               indicator: <dark_indicator_color> 5
           pageTheme:
             default:
               backgroundColor: [<dark_background_color_1>, <dark_background_color_2>] 6
   # ...

   1

   The main primary color for the light color palette, for example, #ffffff or white

   2

   The color of the navigation indicator for the light color palette, which is a vertical bar that indicates the selected tab in the navigation panel, for example, #FF0000 or red

   3

   The background color for the default page theme for the light color palette, for example, #ffffff or white

   4

   The main primary color for the dark color palette, for example, #000000 or black

   5

   The color of the navigation indicator for the dark color palette, which is a vertical bar that indicates the selected tab in the navigation panel, for example, #FF0000 or red

   6

   The background color for the default page theme for the dark color palette, for example, #000000 or black

   Additional resources

   • Section 9.1, “Customizing the theme mode for your Developer Hub instance”

   = Customizing the page theme header for your Developer Hub instance

   You can customize the header color for the light and dark theme modes in your Developer Hub instance by modifying the branding.theme section of the app-config.yaml file. You can also customize the page headers for additional Developer Hub pages, such as the Home, Catalog, and APIs pages.

   app:
     branding:
       theme:
         light: 1
           palette: {}
           pageTheme:
             default: 2
               backgroundColor: "<default_light_background_color>" 3
               fontColor: "<default_light_font_color>" 4
               shape: none 5
             apis: 6
               backgroundColor: "<apis_light_background_color>"
               fontColor: "<apis_light_font_color>"
               shape: none
         dark:
           palette: {}
           pageTheme:
             default:
               backgroundColor: "<default_dark_background_color>"
               fontColor: "<default_dark_font_color>"
               shape: none
   # ...

   1

   The theme mode, for example, light or dark

   2

   The yaml header for the default page theme configuration

   3

   The color of the page header background, for example, #ffffff or white

   4

   The color of the text in the page header, for example, #000000 or black

   5

   The pattern on the page header, for example, wave, round, or none

   6

   The yaml header for a specific page theme configuration, for example, apis, home

   = Customizing the font for your Developer Hub instance

   You can configure the typography section of the app-config.yaml file to change the default font family and size of the page text, as well as the font family and size of each heading level, as shown in the following example:

   app:
     branding:
       theme:
         light:
           typography:
             fontFamily: "Times New Roman"
             htmlFontSize: 11 # smaller is bigger
             h1:
               fontFamily: "Times New Roman"
               fontSize: 40
             h2:
               fontFamily: "Times New Roman"
               fontSize: 30
             h3:
               fontFamily: "Times New Roman"
               fontSize: 30
             h4:
               fontFamily: "Times New Roman"
               fontSize: 30
             h5:
               fontFamily: "Times New Roman"
               fontSize: 30
             h6:
               fontFamily: "Times New Roman"
               fontSize: 30
         dark:
           typography:
             fontFamily: "Times New Roman"
             htmlFontSize: 11 # smaller is bigger
             h1:
               fontFamily: "Times New Roman"
               fontSize: 40
             h2:
               fontFamily: "Times New Roman"
               fontSize: 30
             h3:
               fontFamily: "Times New Roman"
               fontSize: 30
             h4:
               fontFamily: "Times New Roman"
               fontSize: 30
             h5:
               fontFamily: "Times New Roman"
               fontSize: 30
             h6:
               fontFamily: "Times New Roman"
               fontSize: 30
   # ...

   = Default Red Hat Developer Hub theme

   You can use the default Red Hat Developer Hub theme configurations to make your Developer Hub instance look like a standard Red Hat Developer Hub instance. You can also modify the app-config.yaml file to customize or disable particular parameters.

   == Default Red Hat Developer Hub theme color palette

   The app-config.yaml file uses the following configurations for the default Red Hat Developer Hub color palette:

   app:
     branding:
       theme:
         light:
           variant: "rhdh"
           mode: "light"
           palette:
             background:
               default: "#F8F8F8"
               paper: "#FFFFFF"
             banner:
               closeButtonColor: "#FFFFFF"
               error: "#E22134"
               info: "#2E77D0"
               link: "#000000"
               text: "#FFFFFF"
               warning: "#FF9800"
             border: "#E6E6E6"
             bursts:
               backgroundColor:
                 default: "#7C3699"
               fontColor: "#FEFEFE"
               gradient:
                 linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
               slackChannelText: "#ddd"
             errorBackground: "#FFEBEE"
             errorText: "#CA001B"
             gold: "#FFD600"
             highlight: "#FFFBCC"
             infoBackground: "#ebf5ff"
             infoText: "#004e8a"
             link: "#0A6EBE"
             linkHover: "#2196F3"
             mode: "light"
             navigation:
               background: "#222427"
               indicator: "#0066CC"
               color: "#ffffff"
               selectedColor: "#ffffff"
               navItem:
                 hoverBackground: "#3c3f42"
               submenu:
                 background: "#222427"
             pinSidebarButton:
               background: "#BDBDBD"
               icon: "#181818"
             primary:
               main: "#0066CC"
             secondary:
               main: "#8476D1"
             status:
               aborted: "#757575"
               error: "#E22134"
               ok: "#1DB954"
               pending: "#FFED51"
               running: "#1F5493"
               warning: "#FF9800"
             tabbar:
               indicator: "#9BF0E1"
             textContrast: "#000000"
             textSubtle: "#6E6E6E"
             textVerySubtle: "#DDD"
             warningBackground: "#F59B23"
             warningText: "#000000"
             text:
               primary: "#151515"
               secondary: "#757575"
             rhdh:
               general:
                 disabledBackground: "#D2D2D2"
                 disabled: "#6A6E73"
                 searchBarBorderColor: "#E4E4E4"
                 formControlBackgroundColor: "#FFF"
                 mainSectionBackgroundColor: "#FFF"
                 headerBottomBorderColor: "#C7C7C7"
                 cardBackgroundColor: "#FFF"
                 sidebarBackgroundColor: "#212427"
                 cardBorderColor: "#C7C7C7"
                 tableTitleColor: "#181818"
                 tableSubtitleColor: "#616161"
                 tableColumnTitleColor: "#151515"
                 tableRowHover: "#F5F5F5"
                 tableBorderColor: "#E0E0E0"
                 tableBackgroundColor: "#FFF"
                 tabsBottomBorderColor: "#D2D2D2"
                 contrastText: "#FFF"
               primary:
                 main: "#0066CC"
                 focusVisibleBorder: "#0066CC"
               secondary:
                 main: "#8476D1"
                 focusVisibleBorder: "#8476D1"
               cards:
                 headerTextColor: "#151515"
                 headerBackgroundColor: "#FFF"
                 headerBackgroundImage: "none"
   
         dark:
           variant: "rhdh"
           mode: "dark"
           palette:
             background:
               default: "#333333"
               paper: "#424242"
             banner:
               closeButtonColor: "#FFFFFF"
               error: "#E22134"
               info: "#2E77D0"
               link: "#000000"
               text: "#FFFFFF"
               warning: "#FF9800"
             border: "#E6E6E6"
             bursts:
               backgroundColor:
                 default: "#7C3699"
               fontColor: "#FEFEFE"
               gradient:
                 linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
               slackChannelText: "#ddd"
             errorBackground: "#FFEBEE"
             errorText: "#CA001B"
             gold: "#FFD600"
             highlight: "#FFFBCC"
             infoBackground: "#ebf5ff"
             infoText: "#004e8a"
             link: "#9CC9FF"
             linkHover: "#82BAFD"
             mode: "dark"
             navigation:
               background: "#0f1214"
               indicator: "#0066CC"
               color: "#ffffff"
               selectedColor: "#ffffff"
               navItem:
                 hoverBackground: "#3c3f42"
               submenu:
                 background: "#0f1214"
             pinSidebarButton:
               background: "#BDBDBD"
               icon: "#404040"
             primary:
               main: "#1FA7F8"
             secondary:
               main: "#B2A3FF"
             status:
               aborted: "#9E9E9E"
               error: "#F84C55"
               ok: "#71CF88"
               pending: "#FEF071"
               running: "#3488E3"
               warning: "#FFB84D"
             tabbar:
               indicator: "#9BF0E1"
             textContrast: "#FFFFFF"
             textSubtle: "#CCCCCC"
             textVerySubtle: "#727272"
             warningBackground: "#F59B23"
             warningText: "#000000"
   
             rhdh:
               general:
                 disabledBackground: "#444548"
                 disabled: "#AAABAC"
                 searchBarBorderColor: "#57585a"
                 formControlBackgroundColor: "#36373A"
                 mainSectionBackgroundColor: "#0f1214"
                 headerBottomBorderColor: "#A3A3A3"
                 cardBackgroundColor: "#292929"
                 sidebarBackgroundColor: "#1b1d21"
                 cardBorderColor: "#A3A3A3"
                 tableTitleColor: "#E0E0E0"
                 tableSubtitleColor: "#E0E0E0"
                 tableColumnTitleColor: "#E0E0E0"
                 tableRowHover: "#0f1214"
                 tableBorderColor: "#515151"
                 tableBackgroundColor: "#1b1d21"
                 tabsBottomBorderColor: "#444548"
                 contrastText: "#FFF"
               primary:
                 main: "#1FA7F8"
                 focusVisibleBorder: "#ADD6FF"
               secondary:
                 main: "#B2A3FF"
                 focusVisibleBorder: "#D0C7FF"
               cards:
                 headerTextColor: "#FFF"
                 headerBackgroundColor: "#0f1214"
                 headerBackgroundImage: "none"

   Alternatively, you can use the following variant and mode values in the app-config.yaml file to apply the previous default configuration:

   app:
     branding:
       theme:
         light:
           variant: "rhdh"
           mode: "light"
         dark:
           variant: "rhdh"
           mode: "dark"

   == Default Red Hat Developer Hub page themes

   The default Developer Hub header color is white in light mode and black in dark mode, as shown in the following app-config.yaml file configuration:

   app:
     branding:
       theme:
         light:
           palette: {}
           defaultPageTheme: default
           pageTheme:
             default:
               backgroundColor: "#ffffff"
         dark:
           palette: {}
           defaultPageTheme: default
           pageTheme:
             default:
               backgroundColor: "#0f1214"

   = Default Backstage theme

   You can use the default Backstage theme configurations to make your Developer Hub instance look like a standard Backstage instance. You can also modify the app-config.yaml file to customize or disable particular parameters.

   == Default Backstage theme color palette

   The app-config.yaml file uses the following configurations for the default Backstage color palette:

   app:
     branding:
       theme:
         light:
           variant: "backstage"
           mode: "light"
           palette:
             background:
               default: "#F8F8F8"
               paper: "#FFFFFF"
             banner:
               closeButtonColor: "#FFFFFF"
               error: "#E22134"
               info: "#2E77D0"
               link: "#000000"
               text: "#FFFFFF"
               warning: "#FF9800"
             border: "#E6E6E6"
             bursts:
               backgroundColor:
                 default: "#7C3699"
               fontColor: "#FEFEFE"
               gradient:
                 linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
               slackChannelText: "#ddd"
             errorBackground: "#FFEBEE"
             errorText: "#CA001B"
             gold: "#FFD600"
             highlight: "#FFFBCC"
             infoBackground: "#ebf5ff"
             infoText: "#004e8a"
             link: "#0A6EBE"
             linkHover: "#2196F3"
             navigation:
               background: "#171717"
               color: "#b5b5b5"
               indicator: "#9BF0E1"
               navItem:
                 hoverBackground: "#404040"
               selectedColor: "#FFF"
               submenu:
                 background: "#404040"
             pinSidebarButton:
               background: "#BDBDBD"
               icon: "#181818"
             primary:
               main: "#1F5493"
             status:
               aborted: "#757575"
               error: "#E22134"
               ok: "#1DB954"
               pending: "#FFED51"
               running: "#1F5493"
               warning: "#FF9800"
             tabbar:
               indicator: "#9BF0E1"
             textContrast: "#000000"
             textSubtle: "#6E6E6E"
             textVerySubtle: "#DDD"
             warningBackground: "#F59B23"
             warningText: "#000000"
   
         dark:
           variant: "backstage"
           mode: "dark"
           palette:
             background:
               default: "#333333"
               paper: "#424242"
             banner:
               closeButtonColor: "#FFFFFF"
               error: "#E22134"
               info: "#2E77D0"
               link: "#000000"
               text: "#FFFFFF"
               warning: "#FF9800"
             border: "#E6E6E6"
             bursts:
               backgroundColor:
                 default: "#7C3699"
               fontColor: "#FEFEFE"
               gradient:
                 linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
               slackChannelText: "#ddd"
             errorBackground: "#FFEBEE"
             errorText: "#CA001B"
             gold: "#FFD600"
             highlight: "#FFFBCC"
             infoBackground: "#ebf5ff"
             infoText: "#004e8a"
             link: "#9CC9FF"
             linkHover: "#82BAFD"
             mode: "dark"
             navigation:
               background: "#424242"
               color: "#b5b5b5"
               indicator: "#9BF0E1"
               navItem:
                 hoverBackground: "#404040"
               selectedColor: "#FFF"
               submenu:
                 background: "#404040"
             pinSidebarButton:
               background: "#BDBDBD"
               icon: "#404040"
             primary:
               dark: "#82BAFD"
               main: "#9CC9FF"
             secondary:
               main: "#FF88B2"
             status:
               aborted: "#9E9E9E"
               error: "#F84C55"
               ok: "#71CF88"
               pending: "#FEF071"
               running: "#3488E3"
               warning: "#FFB84D"
             tabbar:
               indicator: "#9BF0E1"
             textContrast: "#FFFFFF"
             textSubtle: "#CCCCCC"
             textVerySubtle: "#727272"
             warningBackground: "#F59B23"
             warningText: "#000000"

   Alternatively, you can use the following variant and mode values in the app-config.yaml file to apply the previous default configuration:

   app:
     branding:
       theme:
         light:
           variant: "backstage"
           mode: "light"
         dark:
           variant: "backstage"
           mode: "dark"

   == Default Backstage page themes

   The default Backstage header color is white in light mode and black in dark mode, as shown in the following app-config.yaml file configuration:

   app:
     branding:
       theme:
         light:
           palette: {}
           defaultPageTheme: default
           pageTheme:
             default:
               backgroundColor: ['#005B4B'] # teal
               fontColor: '#ffffff'
               shape: wave
             documentation:
               backgroundColor: ['#C8077A', '#C2297D'] # pinkSea
               fontColor: '#ffffff'
               shape: wave2
             tool:
               backgroundColor: ['#8912CA', '#3E00EA'] # purpleSky
               fontColor: '#ffffff'
               shape: round
             service:
               backgroundColor: ['#006D8F', '#0049A1'] # marineBlue
               fontColor: '#ffffff'
               shape: wave
             website:
               backgroundColor: ['#0027AF', '#270094'] # veryBlue
               fontColor: '#ffffff'
               shape: wave
             library:
               backgroundColor: ['#98002B', '#8D1134'] # rubyRed
               fontColor: '#ffffff'
               shape: wave
             other:
               backgroundColor: ['#171717', '#383838'] # darkGrey
               fontColor: '#ffffff'
               shape: wave
             app:
               backgroundColor: ['#BE2200', '#A41D00'] # toastyOrange
               fontColor: '#ffffff'
               shape: shapes.wave
             apis:
               backgroundColor: ['#005B4B'] # teal
               fontColor: '#ffffff'
               shape: wave2
             card:
               backgroundColor: ['#4BB8A5', '#187656'] # greens
               fontColor: '#ffffff'
               shape: wave
   
         dark:
           palette: {}
           defaultPageTheme: default
           pageTheme:
             default:
               backgroundColor: ['#005B4B'] # teal
               fontColor: '#ffffff'
               shape: wave
             documentation:
               backgroundColor: ['#C8077A', '#C2297D'] # pinkSea
               fontColor: '#ffffff'
               shape: wave2
             tool:
               backgroundColor: ['#8912CA', '#3E00EA'] # purpleSky
               fontColor: '#ffffff'
               shape: round
             service:
               backgroundColor: ['#006D8F', '#0049A1'] # marineBlue
               fontColor: '#ffffff'
               shape: wave
             website:
               backgroundColor: ['#0027AF', '#270094'] # veryBlue
               fontColor: '#ffffff'
               shape: wave
             library:
               backgroundColor: ['#98002B', '#8D1134'] # rubyRed
               fontColor: '#ffffff'
               shape: wave
             other:
               backgroundColor: ['#171717', '#383838'] # darkGrey
               fontColor: '#ffffff'
               shape: wave
             app:
               backgroundColor: ['#BE2200', '#A41D00'] # toastyOrange
               fontColor: '#ffffff'
               shape: shapes.wave
             apis:
               backgroundColor: ['#005B4B'] # teal
               fontColor: '#ffffff'
               shape: wave2
             card:
               backgroundColor: ['#4BB8A5', '#187656'] # greens
               fontColor: '#ffffff'
               shape: wave

   = Loading a custom Developer Hub theme by using a dynamic plugin

   You can load a custom Developer Hub theme from 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 1
                title: Light
                variant: light
                icon: someIconReference
                importName: lightThemeProvider

      1

      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.

   Verification

   • The theme is available in the Developer Hub Settings page.

   = Custom component options for your Developer Hub instance

   There are two component variants that you can use to customize various components of your Developer Hub theme:

   • Patternfly
   • MUI

   In addition to assigning a component variant to each parameter in the light or dark theme mode configurations, you can toggle the rippleEffect on or off.

   The following code shows the options that you can use in the app-config.yaml file to configure the theme components for your Developer Hub instance:

   app:
     branding:
       theme:
         light:
           options:
             rippleEffect: off / on
             paper: patternfly / mui
             buttons: patternfly / mui
             inputs: patternfly / mui
             accordions: patternfly / mui
             sidebars: patternfly / mui
             pages: patternfly / mui
             headers: patternfly / mui
             toolbars: patternfly / mui
             dialogs: patternfly / mui
             cards: patternfly / mui
             tables: patternfly / mui
             tabs: patternfly / mui
         dark:
           options:
             rippleEffect: off / on
             paper: patternfly / mui
             buttons: patternfly / mui
             inputs: patternfly / mui
             accordions: patternfly / mui
             sidebars: patternfly / mui
             pages: patternfly / mui
             headers: patternfly / mui
             toolbars: patternfly / mui
             dialogs: patternfly / mui
             cards: patternfly / mui
             tables: patternfly / mui
             tabs: patternfly / mui

   = Customizing the Home page

   When using the app-config, you can do the following:

   • Customize and extend the default Home page layout with additional cards that appear based on the plugins you have installed and enabled.
   • Change quick access links.

   • Add, reorganize, and remove the following available cards:

     • Search bar
     • Quick access
     • Headline
     • Markdown
     • Placeholder
     • Catalog starred entities
     • Featured docs

   = Customizing the Home page cards

   Administrators can change the fixed height of cards that are in a 12-column grid.

   The default Home page is as shown in the following app-config.yaml file configuration:

   dynamicPlugins:
     frontend:
       red-hat-developer-hub.backstage-plugin-dynamic-home-page:
         dynamicRoutes:
           - path: /
             importName: DynamicHomePage
         mountPoints:
           - mountPoint: home.page/cards
             importName: SearchBar
             config:
               layouts:
                 xl: { w: 10, h: 1, x: 1 }
                 lg: { w: 10, h: 1, x: 1 }
                 md: { w: 10, h: 1, x: 1 }
                 sm: { w: 10, h: 1, x: 1 }
                 xs: { w: 12, h: 1 }
                 xxs: { w: 12, h: 1 }
           - mountPoint: home.page/cards
             importName: QuickAccessCard
             config:
               layouts:
                 xl: { w: 7, h: 8 }
                 lg: { w: 7, h: 8 }
                 md: { w: 7, h: 8 }
                 sm: { w: 12, h: 8 }
                 xs: { w: 12, h: 8 }
                 xxs: { w: 12, h: 8 }
           - mountPoint: home.page/cards
             importName: CatalogStarredEntitiesCard
             config:
               layouts:
                 xl: { w: 5, h: 4, x: 7 }
                 lg: { w: 5, h: 4, x: 7 }
                 md: { w: 5, h: 4, x: 7 }
                 sm: { w: 12, h: 4 }
                 xs: { w: 12, h: 4 }
                 xxs: { w: 12, h: 4 }

   Prerequisites

   • You have administrative access and can modify the app-config.yaml file for dynamic plugin configurations.

   Procedure

   • Configure different cards for your Home page in Red Hat Developer Hub as follows:

     Search

1. From the Developer perspective in the Red Hat OpenShift Container Platform web console, click +Add > Import from Git.
2. Enter the URL of your Git repository into the Git Repo URL field.

1. On the General tab, enter red-hat-developer-hub-customization-provider in the Name field and click Create.

2. On the Advanced Options tab, copy the value from Target Port.

   Note

   Target Port automatically generates a Kubernetes or OpenShift Container Platform service to communicate with.

3. Add the following code to the app-config.yaml file:

   proxy:
     endpoints:
       # Other Proxies
       # customize developer hub instance
       '/developer-hub':
         target: ${HOMEPAGE_DATA_URL} 1
         changeOrigin: true
         # Change to "false" in case of using self-hosted cluster with a self-signed certificate
         secure: true

   1

   http://<SERVICE_NAME>:8080, for example, http://rhdh-customization-provider:8080.

   Note

   The red-hat-developer-hub-customization-provider service contains the 8080 port by default. If you are using a custom port, you can specify it with the 'PORT' environmental variable in the app-config.yaml file.

4. Replace the HOMEPAGE_DATA_URL by adding the URL to rhdh-secrets or by directly replacing it in your custom ConfigMap.
5. Delete the Developer Hub pod to ensure that the new configurations are loaded correctly.