Theme hacking
A more obscure way to override theme settings despite the chosen variant is to use the global.theme.customJson value to override just the ones you want to change.
How it works
At runtime the theme is defined by an internal JSON file at /opt/app-root/src/packages/app/dist/theme.json. We allow overring it completely or partially by using the global.theme values for the Helm chart:
global:
  # custom theme settings
  theme:
    # Theme file url (should be a valid url to a json file)
    downloadUrl: ""
    # custom theme json (may merge or replace)
    customJson: |
      {
        "light": {
          "background": {
            "default": "#efefef"
          }
        },
        "dark": {
          "background": {
            "default": "#202020"
          }
        }
      }
    # Merge customJson with default theme ("false" will replace default theme)
    mergeJson: true
    # define favIcon url
    favIcon: ''
upstream:
  backstage:
    containerSecurityContext:
      readOnlyRootFilesystem: false # changing the readOnlyRootFilesystem to allow changing theme
Please notice that:
- downloadUrl should point to a valid URL to a JSON file, the downloaded file will replace the internal theme file.
- customJson can be used to replace or merge with the internal theme file, based on the value of mergeJson.
- favIcon can be used to define a custom favicon for the portal.
The global.theme changes require (for now) that readOnlyRootFilesystem is set to false in the values.yaml file (as shown above).
Below, you'll find a table with references to the main graphical elements of the portal:
| background | DevPortal background color | 
|---|---|
| paper | background overlays | 
| status | tags and alerts | 
| primary | primary app color used in components | 
| page theme | top bar gradient theme | 
 

Internal theme.json file
You can find below a copy of the default content of the internal theme file, but you can find it online at theme.json. You can edit all the colors in this file, but remember you can use the global.theme.customJson value to override just the ones you want to change.
{
  "light": {
    "background": {
      "default": "#efefef",
      "paper": "#ffffff"
    },
    "status": {
      "ok": "#129900",
      "warning": "#e0b908",
      "error": "#b41b39",
      "running": "#1F5493",
      "pending": "#FFED51",
      "aborted": "#757575"
    },
    "bursts": {
      "fontColor": "#FEFEFE",
      "slackChannelText": "#ddd",
      "backgroundColor": {
        "default": "#7C3699"
      },
      "gradient": {
        "linear": "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
      }
    },
    "primary": {
      "main": "#202020"
    },
    "banner": {
      "info": "#111b47",
      "error": "#ffaea5",
      "text": "#13182c",
      "link": "#104c7e",
      "closeButtonColor": "#FFFFFF",
      "warning": "#FF9800"
    },
    "border": "#E6E6E6",
    "textContrast": "#000000",
    "textVerySubtle": "#DDD",
    "textSubtle": "#6E6E6E",
    "highlight": "#FFFBCC",
    "errorBackground": "#FFEBEE",
    "warningBackground": "#F59B23",
    "infoBackground": "#ebf5ff",
    "errorText": "#CA001B",
    "infoText": "#004e8a",
    "warningText": "#000000",
    "linkHover": "#2196F3",
    "link": "#0A6EBE",
    "gold": "#FFD600",
    "navigation": {
      "background": "#171717",
      "indicator": "#9BF0E1",
      "color": "#b5b5b5",
      "selectedColor": "#FFF",
      "navItem": {
        "hoverBackground": "#404040"
      },
      "submenu": {
        "background": "#404040"
      }
    },
    "pinSidebarButton": {
      "icon": "#181818",
      "background": "#BDBDBD"
    },
    "tabbar": {
      "indicator": "#9BF0E1"
    },
    "pageThemes": {
      "primary": "#52a88c",
      "secondary": "#23c28e"
    }
  },
  "dark": {
    "background": {
      "default": "#202020",
      "paper": "#2c2c2c"
    },
    "status": {
      "ok": "#129900",
      "warning": "#e0b908",
      "error": "#b41b39",
      "running": "#1F5493",
      "pending": "#FFED51",
      "aborted": "#757575"
    },
    "bursts": {
      "fontColor": "#FEFEFE",
      "slackChannelText": "#ddd",
      "backgroundColor": {
        "default": "#7C3699"
      },
      "gradient": {
        "linear": "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
      }
    },
    "primary": {
      "main": "#ffffb3"
    },
    "banner": {
      "info": "#111b47",
      "error": "#ffaea5",
      "text": "#13182c",
      "link": "#104c7e",
      "closeButtonColor": "#FFFFFF",
      "warning": "#FF9800"
    },
    "border": "#E6E6E6",
    "textContrast": "#FFFFFF",
    "textVerySubtle": "#727272",
    "textSubtle": "#CCCCCC",
    "highlight": "#FFFBCC",
    "errorBackground": "#FFEBEE",
    "warningBackground": "#F59B23",
    "infoBackground": "#ebf5ff",
    "errorText": "#CA001B",
    "infoText": "#004e8a",
    "warningText": "#000000",
    "linkHover": "#82BAFD",
    "link": "#9CC9FF",
    "gold": "#FFD600",
    "navigation": {
      "background": "#424242",
      "indicator": "#9BF0E1",
      "color": "#b5b5b5",
      "selectedColor": "#FFF",
      "navItem": {
        "hoverBackground": "#404040"
      },
      "submenu": {
        "background": "#151515"
      }
    },
    "pinSidebarButton": {
      "icon": "#404040",
      "background": "#BDBDBD"
    },
    "tabbar": {
      "indicator": "#9BF0E1"
    },
    "pageThemes": {
      "primary": "#52a88c",
      "secondary": "#23c28e"
    }
  }
}