Backstage: Customize pageTheme for pages and cards

[mijailr]

Feature Suggestion

The current implementation of the Header Component have fixed colors and it can't be modified using the theme customization, so it's a lock for changing the look and feel.

https://github.com/spotify/backstage/blob/35abda0fa0d7402a0024ee4f53971d93ad0b0b8d/packages/core/src/layout/Page/PageThemeProvider.ts#L52-L61

Possible Implementation

To solve this we need to remove the use of @backstage/core -> pageTheme and maybe add the definition to the createTheme from @backstage/theme to include the object for the customization of the pageTheme like:

const myTheme = createTheme({
  pageTheme: {
    home: genPageTheme(colorVariants.teal, shapes.wave),
    documentation: genPageTheme(colorVariants.pinkSea, shapes.wave2),
    tool: genPageTheme(colorVariants.purpleSky, shapes.round),
    service: genPageTheme(colorVariants.marineBlue, shapes.wave),
    website: genPageTheme(colorVariants.veryBlue, shapes.wave),
    library: genPageTheme(colorVariants.rubyRed, shapes.wave),
    other: genPageTheme(colorVariants.darkGrey, shapes.wave),
    app: genPageTheme(colorVariants.toastyOrange, shapes.wave),
  },
  palette: lightTheme.palette,
  fontFamily: 'Comic Sans MS',
});

I'm not entirely sure about how to make this change without affecting all the plugins.

Context

When trying to customize the look and feel the current implementation is good enough for most of app, but the headers for pages and cards are fixed to use the default colors on backstage. Allowing to do that it's good when an adopter needs to match the portal with the internal branding.

[Marvin9]

I would like to work on it.

[stefanalund]

Nice, assigned you @Marvin9

[Marvin9]

@mijailr I have implemented for pages. However as this issue addresses cards too, can you please elaborate on that one?

[mijailr]

Many thanks @Marvin9 the part related with cards should have a similar approach.

As you can see here:

https://github.com/spotify/backstage/blob/1518741f67fe706edc2e4dd468fcc5da0befe66c/packages/core/src/layout/ItemCard/ItemCard.tsx#L19-L38

The styles can't be customized.