Skip to content

fix(theme): update brand colors in response to config changes

Ben Whitmore requested to merge colors-fix-20230417 into main

Brand colours were not updating in some UI components in response to config changes. This was for two reasons:

  1. The components in question were requiring the theme file directly, which was not being dynamically updated
  2. They were accessing the colors property of themes, which was not being updated even when accessed via the dynamicTheme.

I've changed all use of brand colors to access via e.g. th('colors.brand1.tint10') as opposed to theme.colors.brand1.tint10. This is a bit cumbersome but OK for an urgent fix. Note that some non-branding colors are still accessed as e.g. theme.colors.neutral.gray60, which is not consistent, but I don't want to change all these until we have decided on the best consistent approach.

I've also modified the creation of the dynamicTheme in Pages.js to update not only its colorPrimary and colorSecondary properties, but also its colors property with all sub-properties. (This property is where we want to get all colors from in the future, and we are gradually migrating the UI to use this in preference.)

I would like to refactor so we can access colors more succinctly, and access all colors the same way rather than giving branding colors special treatment; but not in this urgent fix.

Merge request reports