Jira Forge app with customUI doesn't return dark mode / can't set up design tokens correctly?

Hi all!
I’m trying to make my forge app use the new design tokens. But I can’t seem to get it working.

My dev user profile is set to dark mode (and the theme is applied to jira) but when I read the theme via themeObserver or just get the values of the token with getTokenValue it seems to be returning light mode.
So my app ends up having a white background when jira is set to dark mode and everything else’s is styled in dark mode.

I’ve been following this:

I set up the themes on my customUI main root component main.tsx:

import '@atlaskit/css-reset';
import { setGlobalTheme } from '@atlaskit/tokens';

setGlobalTheme({ light: 'light', dark: 'legacy-dark', colorMode: 'auto' });

    <App />

And in a component"

  console.log('**token value', `${getTokenValue('elevation.surface', 'not working')}`);
  const theme = useThemeObserver();
  console.log('**theme:', theme);


**token value #FFFFFF
**theme: {dark: ‘legacy-dark’, light: ‘light’, colorMode: ‘light’}

I was expecting to receive dark mode since It was set to auto and the user profile is set to dark mode. Am I missing something here? What else should be doing to get the actual theme?

Many thanks!


Got it!

For anyone stuck on this… I was missing the following on the customUI root app:

import { view } from "@forge/bridge";