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

Red Hat Developer Hub Theme 🎨

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

It also includes a Storybook for visual regression tests.

API

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

• createDevAppThemes: () => 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 { createDevAppThemes } from '@redhat-developer/red-hat-developer-hub-theme';
   
   // ...
   
   createDevApp()
     .registerPlugin(...)
     .addThemes(createDevAppThemes())
     .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

Links

• PatternFly

  • Colors
    • PatternFly design foundation
    • PatternFly v6 design foundation
    • Red Hat Brand standards/colors

• Backstage

  • Getting started > App custom theme
  • Implementation:
    • packages/theme/src/unified
    • packages/theme/src/unified/types.ts
    • packages/theme/src/v4/baseTheme.ts
    • packages/theme/src/unified/UnifiedTheme.tsx

• MUI v4:

  • Theming
  • Palette

• MUI v5

  • Theming
  • Theme components
  • Palette
  • Implementation:
    • packages/mui-material/src/styles/adaptV4Theme.js