8.9. 使用动态插件载入自定义 Developer Hub 主题

流程

1. 在动态插件中导出主题供应商功能，例如：

   myTheme.ts 片段示例

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

   有关创建自定义主题的更多信息，请参阅 Backstage 文档 - 创建自定义主题。

2. 配置 Developer Hub，以使用 themes 配置字段在 UI 中加载主题：

   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

   通过指定所需的值来设置您的主题 ID。（可选）使用以下 ID 值覆盖默认的 Developer Hub 主题： light 来替换默认的 light theme，或 dark 替换默认的 dark 主题。