Backstage - Changing Page Header Color

Question

I am trying to change the header text color on pages in Backstage (Spotify's open source software catalog). I have tried using themes as advised in Backstage documentation, but there is no way to specifically override the header text color (I can change the background colour, but not the color of the text.

I have tried a few solutions - this changes the background color of the header to white but the text remains white (default color) and actual header text cannot be read (white text on white background):

genPageTheme({colors: ['#ffffff', '#ffffff'], shape: shapes.wave})

I then found the ability to add a fontColor to the genPageTheme function and tried the following, but again it did not change the header color - I am not sure if I am calling it incorrectly:

genPageTheme({colors: ['#ffffff', '#ffffff'], shape: shapes.wave, options: {fontColor: '#B1D8FF'} }),

I also took a look at customizing the overall theme but found there is no field that allows the header to be modified (neither background nor text):

const myTheme = createTheme({
  palette: {
    ...lightTheme.palette,
    primary: {
      main: '#2670A9',
    },
    :
    :

I figure there is a way to do this using material-ui (MUI) directly since Backstage uses MUI but I would like to stay true to the Backstage customization approach of using their themes.

Any ideas how the header text color can be changed? Any ideas would be helpful!

Answer 1

You need to use BackstageOverrides. This will allow you to override default Backstage settings.

This will allow you to customize (a lot) your application.

A simple example:

import { BackstageOverrides } from '@backstage/core-components';
import { BackstageTheme } from '@backstage/theme';

export const customThemeOverrides = (
  theme: BackstageTheme,
): BackstageOverrides => {
  return {
    BackstagePage: {
      root: {
        display: 'grid',
        overflow: 'hidden !important',
        gridTemplateColums: '30px 280px 3fr 30px',
        gridTemplateAreas:
          '"header header header header" ". sidenav content ." ". sidenav content . "',
      },
    },

    BackstageHeader: {
      header: {
        height: '80px',
        gridArea: 'header',
        display: 'flex',
        borderBottom: `1px solid #FFFFFF`,
        backgroundImage: `none`,
        backgroundPosition: 'center',
        padding: '50px',
        boxShadow: 'none',
        background: `#FFFFFF`
      },
      rigthItemsBox: {
        color: '#FFFFFF',
      },
      title: {
        color: `#FFFFFF`,
        fontSize: 24,
      },
      subtitle: {
        color: `#666666`,
      },
      type: {
        color: `#FFFFFF`,
      },
    },
    BackstageHeaderLabel: {
      label: {
        color: '#FFFFFF',
      },
      root: { color: '#FFFFFF',  },
      value: { color: '#FFFFFF' },
    },

  };
};