Custom branding colors

Is your feature request related to a problem? Please describe.

We can already customize the logos and some of the titles using the opensearch_dashboards.yml file. It would be helpful if the theme colors could be customized in a similar way.

Describe the solution you’d like

Ideally, the entire theme would be customizable, but a starting point could be to target some of the most prominent elements like the header, which would already make a big difference.

Describe alternatives you’ve considered

A low impact way to style those elements could be to use the styled components library. For example:

# opensearchDashboards.branding:
#   theme:
#     headerBackgroundColor:  ""

// /src/core/public/chrome/ui/header/header.tsx

const StyledHeader = styled(EuiHeader)`
  background-color: ${(props) => props.branding.theme.headerBackgroundColor};
  border-bottom-color: ${(props) => props.branding.theme.headerBackgroundColor};
`;

export function Header() {
  return (
    <>
      <header className={className} data-test-subj="headerGlobalNav">
        <div id="globalHeaderBars">
          <StyledHeader
            branding={branding}
            // ...props
          />

[kgcreative]

My preference here is that a theme should have a dark/light subvariant. This is because these days, many people just use their OS settings, so I’d like to provide 2 options to users: 1) Theme name; 2) Dark mode (On, Off, Match System). This may mean that some themes may be dark mode only, or light mode only. I would be ok with that.

This would also give additional flexibility for say, specific color blind-friendly themes, high contrast themes, or even specific branded themes.

[andy-mitchell-capgemini]

+1 to the feature request for custom themes.