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

``shell
npm install @red-hat-developer-hub/backstage-plugin-theme
`

or

`shell
yarn add @red-hat-developer-hub/backstage-plugin-theme
`

Use it with VeeCode app


1. Install the dependency with

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

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

`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

1. Install the dependency with

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

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

`tsx
import { getThemes } from '@red-hat-developer-hub/backstage-plugin-theme';

// ...

const app = createApp({
apis,
// ...
themes: getThemes(),
`

Use it while developing a plugin

1. Install the dependency with

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

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

`tsx
import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme';

// ...

createDevApp()
.registerPlugin(...)
.addThemes(getAllThemes())
.addPage({
// ...
})
.render();
`

Use yarn link

1. Clone the rhdh theme and run npm link in it:

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

2. To use this link you can cd any other repository:

`shell
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