I have a react app using the TopNavigation component- how can I apply a theme to change the background color?

[surfgeek]

I've tried quite a few different things here.. I just want to change the background color of the TopNavigation component from grey to blue (for example). I've tried setting the css inline, in a css file, using custom tokens, but nothing I do changes the color. Can someone give me an example how how I would do this in my code? I would also like to change the overall background in dark mode from that same gray to something else. I've been hammering at Claude 3.5 for help too and couldn't solve it. Thanks

[surfgeek]

Fixed it! Wow that was absurdly painful. Maybe it's intentional but the package naming was a challenge to start and didn't follow any examples I found, i.e. components-themeable, components/theming. Anyways this actually worked:

import { Theme } from "@cloudscape-design/components-themeable"
import { applyTheme } from '@cloudscape-design/components/theming';

const theme: Theme = {
  tokens: {},
  contexts: {
    'top-navigation': {
      tokens: {
        colorBackgroundContainerContent: '#005abc'
      },
    },
  },
};

applyTheme({ theme });