Description of problem:

Applying a custom theme can cause runtime JavaScript errors in the RHDH UI, breaking functionality such as the Catalog and APIs UI.

Prerequisites (if any, like setup, operators/versions):

Steps to Reproduce

1. Deploy RHDH with a custom config map loaded, i.e app-config-rhdh
2. Add custom branding as shown below. The error in this branding is that the fontColor is an array when it should be a string

branding:
  theme:
    light:
      palette:
        primary:
          main: '#222529'
        navigation:
          indicator: '#d25f78'
        background:
          default: '#f8f8f8'
      pageTheme:
        default:
          fontColor: ['#101010']
          backgroundColor: ['#fefefe'] 

Actual results:

Unable to view the Catalog and APIs. Home loads fine.

Expected results:

Working Catalog and APIs. An invalid theme property should probably be flagged in console logs, but not break the UI.

Reproducibility (Always/Intermittent/Only Once):

Always.

Build Details:

RHDH Version: 1.2.2
Backstage Version: 1.26.5
Upstream: janus-idp/backstage-showcase 1.2.x @ c14d6dac
Midstream: gitlab.cee.redhat.com/rhidp/rhdh rhdh-1.2-rhel-9 @ 01df3afc
Build Time: 2024-08-19T03:35:16Z

Additional info (Such as Logs, Screenshots, etc):