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

Forge
1

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:
https://atlassian.design/tokens/use-tokens-in-code#set-up-themes-and-theme-switching

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' });

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

And in a component"

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

console:

**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!

David

2

Got it!
https://developer.atlassian.com/platform/forge/design-tokens-and-theming

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

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

view.theme.enable();