@veecode-platform/backstage-plugin-theme

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

• Install the dependency with

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

• 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

• Install the dependency with

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

• 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

• Install the dependency with

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

• 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

• Clone the rhdh theme and run npm link in it:

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

• 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