❤
npm
Sign UpSign In

@brigadeworks/devex-opa-theme
TypeScript icon, indicating that this package has built-in type declarations

0.0.0-main-5dd68e7 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i @brigadeworks/devex-opa-theme

Repository

github.com/opensource-sig/devex-ops-theme

Homepage

opensource.brigadeworks.com/

Version

0.0.0-main-5dd68e7

License

Apache-2.0

Unpacked Size

1.29 MB

Total Files

245

Last publish

Collaborators

  • brigade-oss-adm
Try on RunKit
Report malware