1.18. 動的プラグインからカスタム Backstage テーマを読み込む

手順

1. 以下のように、テーマプロバイダー関数を動的プラグインにエクスポートします。

   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 Toggle word wrap

2. 新しい themes 設定フィールドを使用して、UI にテーマをロードするように Developer Hub を設定します。

   dynamicPlugins:
     frontend:
       example.my-custom-theme-plugin:
         themes:
           - id: light # <1>
             title: Light
             variant: light
             icon: someIconReference
             importName: lightThemeProvider

   Copy to Clipboard Toggle word wrap

   テーマ ID を設定します。必要に応じて、次の ID 値を指定して、デフォルトの Developer Hub テーマをオーバーライドします。light はデフォルトのライトテーマをオーバーライドし、dark はデフォルトのダークテーマをオーバーライドします。