Chapter 8. Customizing Red Hat Developer Hub appearance The following default theme configurations are available for Red Hat Developer Hub: The Red Hat Developer Hub theme Default theme configurations to make your developer portal look like a standard Red Hat Developer Hub instance. For more information, see Section 8.7, "Default Red Hat Developer Hub theme" The Backstage theme Default theme configurations to make your developer portal look like a standard Backstage instance. For more information, see Section 8.8, "Default Backstage theme" You can change or disable particular parameters in a default theme or create a fully customized theme by modifying the app-config-rhdh.yaml file. From the app-config-rhdh.yaml file, you can customize common theme components, including the following: Company name and logo Font color, size, and style of text in paragraphs, headings, headers, and buttons Header color, gradient, and shape Button color Navigation indicator color You can also customize some components from the Developer Hub GUI, such as the theme mode ( Light Theme , Dark Theme , or Auto ). 8.1. Customizing the theme mode for your Developer Hub instance Note In Developer Hub, theme configurations are used to change the look and feel of different UI components. So, you might notice changes in different UI components, such as buttons, tabs, sidebars, cards, and tables along with some changes in background color and font used on the RHDH pages. You can choose one of the following theme modes for your Developer Hub instance: Light theme Dark theme Auto The default theme mode is Auto, which automatically sets the light or dark theme based on your system preferences. Prerequisites You are logged in to the Developer Hub web console. Procedure From the Developer Hub web console, click Settings . From the Appearance panel, click LIGHT THEME , DARK THEME , or AUTO to change the theme mode. 8.2. Customizing the branding logo of your Developer Hub instance You can customize the branding logo of your Developer Hub instance by configuring the branding section the app-config-rhdh.yaml file, as shown in the following example: app: branding: fullLogo: USD{BASE64_EMBEDDED_FULL_LOGO} 1 iconLogo: USD{BASE64_EMBEDDED_ICON_LOGO} 2 where: 1 fullLogo is the logo on the expanded (pinned) sidebar and expects a base64 encoded image. 2 iconLogo is the logo on the collapsed (unpinned) sidebar and expects a base64 encoded image. You can also customize the width of the branding logo by setting a value for the fullLogoWidth field in the branding section, as shown in the following example: app: branding: fullLogoWidth: 110px 1 # ... 1 The default value for the logo width is 110px . The following units are supported: integer , px , em , rem , percentage. 8.3. Customizing the sidebar menu items for your Developer Hub instance The sidebar menu in Red Hat Developer Hub consists of two main parts: Main menu items : These items are the static menu items that form the core navigation structure of sidebar. These menu items remain consistent and are predefined. Dynamic plugin menu items : These items are displayed beneath the main menu and can be customized based on the plugins installed. The main menu items section is dynamic and can change based on your preferences and installed plugins. Procedure Customize the main menu items using the following steps: Open the app-config-rhdh.yaml file. To customize the order and parent-child relationships for the main menu items, use the dynamicPlugins.frontend.default.main-menu-items.menuItems field. For dynamic plugin menu items, use the dynamicPlugins.frontend.<package_name>.menuItems field. Example app-config-rhdh.yaml file dynamicPlugins: frontend: <package_name>: # same as `scalprum.name` key in plugin's `package.json` menuItems: # optional, allows you to configure plugin menu items in the main sidebar navigation <menu_item_name>: # unique name in the plugin menu items list 1 icon: home | group | category | extension | school | _<your_icon>_ 2 title: My Plugin Page # optional, same as `menuItem.text` in `dynamicRoutes` 3 priority: 10 # optional, defines the order of menu items in the sidebar 4 parent: favorites # optional, defines parent-child relationships for nested menu items 5 You can modify the fields in the example to configure the desired order and parent-child relationships of the sidebar menu items. 1 This attribute represents a unique name in the main sidebar navigation. It can denote either a standalone menu item or a parent menu item. If this attribute represents a plugin menu item, the name of the attribute must match with the corresponding path in dynamicRoutes . For example, if dynamicRoutes defines path: /my-plugin , then menu_item_name must be defined as my-plugin . For more complex, multi-segment paths such as path: /metrics/users/info , the menu_item_name must use dot notation to represent the full path, for example, metrics.users.info . Trailing and leading slashes in paths are ignored. For example, path: /docs results in menu_item_name: docs , and path: /metrics/users results in menu_item_name: metrics.users . 2 This optional attribute specifies the icon for the menu item. You can use default icons or extend the icon set with dynamic plugins. Developer Hub also provides additional icons in its internal library, such as: Home Icon in the internal library dynamicPlugins: frontend: <package_name>: menuItems: <menu_item_name>: icon: home Similarly, the internal library includes icons for group , category , extension , and school . If the icon is already defined in the dynamicRoutes configuration under menuItem.icon , it can be removed from the in the menuItems configuration. Also, both SVG and HTML image icons are supported. For example: Example SVG icon icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg> Example image icon icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png 3 This optional attribute specifies the title of the menu item. It can be removed if the title is already specified in the dynamicRoutes configuration under menuItem.text . 4 This optional attribute 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 attribute for each section. 5 This optional attribute specifies the parent menu item under which the current item is nested. If this attribute is used, the parent menu item must be defined elsewhere in the menuItems configuration of any enabled plugin. You can define this attribute 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: # matches `path` in `dynamicRoutes` priority: 10 # controls order of plugins under the parent menu item parent: favorites # nests this plugin under the `favorites` parent menu item favorites: # configuration for the parent menu item icon: favorite # icon from RHDH system icons title: Favorites # title for the parent menu item priority: 100 # controls the order of this top-level menu item To ensure that a menu item is identified as a main menu item, you must add the default. prefix to its key. For example: Example configuration of main menu items in sidebar navigation dynamicPlugins: frontend: default.main-menu-items: # key for configuring static main menu items menuItems: default.<menu_item_name>: # key of the menu item configuration. `default.` prefix is required for a main menu item key 1 parent: my_menu_group # optional, specifies the parent menu item for this item priority: 10 # optional, specifies the order of this menu item within its menu level default.<menu_group_parent_item_name>: # must be configured if it is specified as the parent of any menu items. `default.` prefix is required for a main group parent item key 2 icon: my_menu_group_icon # required for parent menu items, defines the icon for the menu group title: my_menu_group_title # required for parent menu items, defines the icon for the menu group priority: 100 # optional, specifies the order of the parent menu item in the sidebar 1 2 The default. prefix identifies an item as a main menu item. You can add the default. prefix to both individual menu items or parent menu group configuration, such as default.<menu_group_parent_item_name> in the example. Note The default priority of main menu items determines their order in the sidebar. You can customize the order of the static main menu items by adjusting their priority values. Ensure that the priority and title of each item is clear to facilitate easy reordering. 8.4. 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-rhdh.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 8.1, "Customizing the theme mode for your Developer Hub instance" 8.5. 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-rhdh.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 8.6. Customizing the font for your Developer Hub instance You can configure the typography section of the app-config-rhdh.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 # ... 8.7. 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-rhdh.yaml file to customize or disable particular parameters. 8.7.1. Default Red Hat Developer Hub theme color palette The app-config-rhdh.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-rhdh.yaml file to apply the default configuration: app: branding: theme: light: variant: "rhdh" mode: "light" dark: variant: "rhdh" mode: "dark" 8.7.2. 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-rhdh.yaml file configuration: app: branding: theme: light: palette: {} defaultPageTheme: default pageTheme: default: backgroundColor: "#ffffff" dark: palette: {} defaultPageTheme: default pageTheme: default: backgroundColor: "#0f1214" 8.8. 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-rhdh.yaml file to customize or disable particular parameters. 8.8.1. Default Backstage theme color palette The app-config-rhdh.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-rhdh.yaml file to apply the default configuration: app: branding: theme: light: variant: "backstage" mode: "light" dark: variant: "backstage" mode: "dark" 8.8.2. 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-rhdh.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 8.9. Loading a custom Developer Hub theme by using a dynamic plugin You can load a custom Developer Hub theme from a dynamic plugin. Procedure 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 . Configure Developer Hub to load the theme in the UI by using the themes configuration field: app-config-rhdh.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. 8.10. 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-rhdh.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

Commands:
app: branding: fullLogo: USD{BASE64_EMBEDDED_FULL_LOGO} 1 iconLogo: USD{BASE64_EMBEDDED_ICON_LOGO} 2
app: branding: fullLogoWidth: 110px 1
dynamicPlugins: frontend: <package_name>: # same as `scalprum.name` key in plugin's `package.json` menuItems: # optional, allows you to configure plugin menu items in the main sidebar navigation <menu_item_name>: # unique name in the plugin menu items list 1 icon: home | group | category | extension | school | _<your_icon>_ 2 title: My Plugin Page # optional, same as `menuItem.text` in `dynamicRoutes` 3 priority: 10 # optional, defines the order of menu items in the sidebar 4 parent: favorites # optional, defines parent-child relationships for nested menu items 5
dynamicPlugins: frontend: <package_name>: menuItems: <menu_item_name>: icon: home
icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg>
icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png
dynamicPlugins: frontend: <package_name>: dynamicRoutes: - path: /my-plugin module: CustomModule importName: FooPluginPage menuItem: icon: fooIcon text: Foo Plugin Page menuItems: my-plugin: # matches `path` in `dynamicRoutes` priority: 10 # controls order of plugins under the parent menu item parent: favorites # nests this plugin under the `favorites` parent menu item favorites: # configuration for the parent menu item icon: favorite # icon from RHDH system icons title: Favorites # title for the parent menu item priority: 100 # controls the order of this top-level menu item
dynamicPlugins: frontend: default.main-menu-items: # key for configuring static main menu items menuItems: default.<menu_item_name>: # key of the menu item configuration. `default.` prefix is required for a main menu item key 1 parent: my_menu_group # optional, specifies the parent menu item for this item priority: 10 # optional, specifies the order of this menu item within its menu level default.<menu_group_parent_item_name>: # must be configured if it is specified as the parent of any menu items. `default.` prefix is required for a main group parent item key 2 icon: my_menu_group_icon # required for parent menu items, defines the icon for the menu group title: my_menu_group_title # required for parent menu items, defines the icon for the menu group priority: 100 # optional, specifies the order of the parent menu item in the sidebar
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
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
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
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"
app: branding: theme: light: variant: "rhdh" mode: "light" dark: variant: "rhdh" mode: "dark"
app: branding: theme: light: palette: {} defaultPageTheme: default pageTheme: default: backgroundColor: "#ffffff" dark: palette: {} defaultPageTheme: default pageTheme: default: backgroundColor: "#0f1214"
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"
app: branding: theme: light: variant: "backstage" mode: "light" dark: variant: "backstage" mode: "dark"
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
import { lightTheme } from './lightTheme'; // some custom theme import { UnifiedThemeProvider } from '@backstage/theme'; export const lightThemeProvider = ({ children }: { children: ReactNode }) => ( <UnifiedThemeProvider theme={lightTheme} children={children} /> );
dynamicPlugins: frontend: example.my-custom-theme-plugin: themes: - id: light 1 title: Light variant: light icon: someIconReference importName: lightThemeProvider
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