Customize font color in RootPage Header

[gabriel-dantas98]

In our team we are creating changes to the Backstage UI and we would like to change the color of the background and the header text.

We've already managed to do it with the header background, but we haven't managed to do it with the font.

I've tried to implement it locally but it seems to be a limitation of the Backstage component itself.

Any suggestions for a better approach?

[drodil]

Did you try creating a custom theme and overriding the pageTheme as explained here: https://backstage.io/docs/getting-started/app-custom-theme/#example-of-a-custom-theme

[gabriel-dantas98]

I tried, but I changed the color of all the fonts, not just the q&a header 😕

[drodil]

Did you try passing custom themeId to the RootPage and then applying custom theme for that theme?

So for example:

<QetaPage themeId="qeta"/>

And then in your app

createTheme({
  pageTheme: {
    qeta: genPageTheme({
      options: {
        fontColor: 'blue'
      }
    })
  }
});