이 콘텐츠는 선택한 언어로 제공되지 않습니다.
Chapter 11. 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 11.9, “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 11.10, “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).
11.1. Customizing the theme mode for your Developer Hub instance 링크 복사링크가 클립보드에 복사되었습니다!
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.
11.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 in the app-config.yaml
file, as shown in the following example:
app: branding: fullLogo: ${BASE64_EMBEDDED_FULL_LOGO} iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}
app:
branding:
fullLogo: ${BASE64_EMBEDDED_FULL_LOGO}
iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}
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 format the
BASE64_EMBEDDED_FULL_LOGO
environment variable as follows:BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"
BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"
Copy to Clipboard Copied! Toggle word wrap Toggle overflow The following example demonstrates how to customize the
BASE64_EMBEDDED_FULL_LOGO
using thedata:_<media_type>_;base64,<base64_data>
format:SVGLOGOBASE64=$(base64 -i logo.svg) BASE64_EMBEDDED_FULL_LOGO="data:image/svg+xml;base64,$SVGLOGOBASE64"
SVGLOGOBASE64=$(base64 -i logo.svg) BASE64_EMBEDDED_FULL_LOGO="data:image/svg+xml;base64,$SVGLOGOBASE64"
Copy to Clipboard Copied! Toggle word wrap Toggle overflow Replace
image/svg+xml
with the correct media type for your image (for example,image/png
andimage/jpeg
), and adjust the file extension accordingly. As a result, you can embed the logo directly without referencing an external file.
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 # ...
app:
branding:
fullLogoWidth: 110px
# ...
- 1
- The default value for the logo width is
110px
. The following units are supported:integer
,px
,em
,rem
, percentage.
11.4. Configuring entity tab titles 링크 복사링크가 클립보드에 복사되었습니다!
Red Hat Developer Hub provides a default opinionated tab set for catalog entity views. For consistency with your organization needs, you can rename, reorder, remove, and add tab titles.
Procedure
For each tab to modify, enter your desired values in the
entityTabs
section in yourapp-config.yaml
file:Copy to Clipboard Copied! Toggle word wrap Toggle overflow <plugin_name>
-
Enter the plugin name, such as
backstage-community.plugin-topology
. mountPoint
-
Enter the tab mountpoint, such as
entity.page.topology
. path
-
Enter the tab path, such as
/topology
. title
-
Enter the tab title, such as
Topology
. priority
Optional.
To reorder tabs, enter the tab priority, such as
42
. Higher priority appears first.To remove a tab, enter a negative value, such as
-1
.
11.5. Configuring entity detail tab layout 링크 복사링크가 클립보드에 복사되었습니다!
Each Red Hat Developer Hub entity detail tab has a default opinionated layout. For consistency with your organization needs, you can change the entity detail tab content when the plugin that contributes the tab content allows a configuration.
Prerequisites
-
The plugin that contributes the tab content allows a configuration, such as Developer Hub plugins defining a default configuration in a
config
section.
Procedure
Copy the plugin default configuration in your
app-config.yaml
file, and change thelayout
properties.Copy to Clipboard Copied! Toggle word wrap Toggle overflow package
-
Enter your package location, such as
./dynamic-plugins/dist/backstage-community-plugin-tekton
. <plugin_name>
-
Enter your plugin name, such as:
backstage-community.plugin-tekton
. mountPoint
-
Copy the mount point defined in the plugin default configuration, such as:
entity.page.ci/cards
. importName
-
Copy the import name defined in the plugin default configuration, such as:
TektonCI
. layout
-
Enter your layout configuration. The tab content is displayed in a responsive grid that uses a 12 column-grid and supports different breakpoints (
xs
,sm
,md
,lg
,xl
) that can be specified for a CSS property, such asgridColumn
. The example uses 6 of the 12 columns to show two Tekton CI cards side-by-side on large (lg
) screens (span 6
columns) and show them among themselves (xs
and abovespan 12
columns).
11.6. 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:
- 1
- The main primary color for the light color palette, for example,
#ffffff
orwhite
- 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
orred
- 3
- The background color for the default page theme for the light color palette, for example,
#ffffff
orwhite
- 4
- The main primary color for the dark color palette, for example,
#000000
orblack
- 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
orred
- 6
- The background color for the default page theme for the dark color palette, for example,
#000000
orblack
Additional resources
11.7. 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.
- 1
- The theme mode, for example,
light
ordark
- 2
- The
yaml
header for the default page theme configuration - 3
- The color of the page header background, for example,
#ffffff
orwhite
- 4
- The color of the text in the page header, for example,
#000000
orblack
- 5
- The pattern on the page header, for example,
wave
,round
, ornone
- 6
- The
yaml
header for a specific page theme configuration, for example,apis
,home
11.8. 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:
11.9. 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.
11.9.1. 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:
Alternatively, you can use the following variant
and mode
values in the app-config.yaml
file to apply the previous default configuration:
11.9.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.yaml
file configuration:
11.10. 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.
11.10.1. Default Backstage theme color palette 링크 복사링크가 클립보드에 복사되었습니다!
The app-config.yaml
file uses the following configurations for the default Backstage color palette:
Alternatively, you can use the following variant
and mode
values in the app-config.yaml
file to apply the previous default configuration:
11.10.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.yaml
file configuration:
11.11. 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
fragmentimport { lightTheme } from './lightTheme'; // some custom theme import { UnifiedThemeProvider } from '@backstage/theme'; export const lightThemeProvider = ({ children }: { children: ReactNode }) => ( <UnifiedThemeProvider theme={lightTheme} children={children} /> );
import { lightTheme } from './lightTheme'; // some custom theme import { UnifiedThemeProvider } from '@backstage/theme'; export const lightThemeProvider = ({ children }: { children: ReactNode }) => ( <UnifiedThemeProvider theme={lightTheme} children={children} /> );
Copy to Clipboard Copied! Toggle word wrap Toggle overflow 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.yaml
fragmentCopy to Clipboard Copied! Toggle word wrap Toggle overflow - 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, ordark
to replace the default dark theme.
Verification
- The theme is available in the Developer Hub Settings page.
11.12. 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: