VeeCode Developer Hub Theme 🎨

A set of theming options for MUI Material UI and Backstage that look more similar to PatternFly.

It also includes a Storybook and a Storybook test-runner for automatic visual regression tests.

API

Returns all testable themes (incl. the backstage default color scheme and older RHDH versions):

• getAllThemes: () => AppTheme[]
• useAllThemes: () => AppTheme[]

Returns the latest, not released RHDH light and dark theme for your backstage/RHDH instance:

• getThemes: () => AppTheme[]
• useThemes: () => AppTheme[]
• useLoaderTheme: () => MUIv5.Theme

Install dependencies

npm install @red-hat-developer-hub/backstage-plugin-theme

or

yarn add @red-hat-developer-hub/backstage-plugin-theme

Use it with VeeCode app

1. Install the dependency with

   yarn workspace app add @red-hat-developer-hub/backstage-plugin-theme

2. In packages/app/src/components/DynamicRoot/DynamicRoot.tsx

   import { useThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
   
   // ...
   
   const themes = useThemes();
   
   // ...
   
   app.current = createApp({
     apis: [...staticApis, ...remoteApis],
     // ... remove defaultThemes from here:
     themes,
     components: defaultAppComponents,
   });

Use it with any Backstage app

1. Install the dependency with

   yarn workspace app add @red-hat-developer-hub/backstage-plugin-theme

2. Update packages/app/src/App.tsx and apply the themes to createApp:

   import { getThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
   
   // ...
   
   const app = createApp({
     apis,
     // ...
     themes: getThemes(),

Use it while developing a plugin

1. Install the dependency with

   yarn workspace <plugin-root or plugin-name> add @red-hat-developer-hub/backstage-plugin-theme

2. Add to your */dev/index.tsx:

   import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
   
   // ...
   
   createDevApp()
     .registerPlugin(...)
     .addThemes(getAllThemes())
     .addPage({
       // ...
     })
     .render();

Use yarn link

1. Clone the rhdh theme and run npm link in it:

   cd red-hat-developer-hub-theme
   yarn link

2. To use this link you can cd any other repository:

   cd ../backstage-plugins
   yarn link @red-hat-developer-hub/backstage-plugin-theme

Additional links

• Backstage
  • Getting started > App custom theme
  • packages/theme/src/unified
  • packages/theme/src/unified/types.ts
  • packages/theme/src/v4/baseTheme.ts
  • packages/theme/src/unified/UnifiedTheme.tsx
• PatternFly
  • PatternFly design foundation
  • PatternFly v6 design foundation
  • Red Hat Brand standards/colors
• MUI v4:
  • Theming
  • Palette
• MUI v5
  • Theming
  • Palette
  • Theme components
  • packages/mui-material/src/styles/adaptV4Theme.js

By: RHDH