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 documentation - Creating a Custom Theme を参照してください。

2. themes 設定フィールドを使用して、UI にテーマを読み込むように Developer Hub を設定します。

   app-config-rhdh.yaml の一部

   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、デフォルトのダークテーマを置き換える場合は dark となります。