@redhat-developer/red-hat-developer-hub-theme

RHDH / Red Hat 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 @redhat-developer/red-hat-developer-hub-theme

or

yarn add @redhat-developer/red-hat-developer-hub-theme

Use it with RHDH app

Starting with 1.2 this library is shipped with your RHDH installation.

On older RHDH instances you can install it:

1. Install the dependency with

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

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

   import { useThemes } from '@redhat-developer/red-hat-developer-hub-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 @redhat-developer/red-hat-developer-hub-theme
   

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

   import { getThemes } from '@redhat-developer/red-hat-developer-hub-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 @redhat-developer/red-hat-developer-hub-theme
   

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

   import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-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 @redhat-developer/red-hat-developer-hub-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