Skip to content

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

Repository files navigation

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