Matching forge module to different background colors

Forge Forge UI Kit and Custom UI
,
1

Hello,

Firstly, I’d like to mention that this issue only occurs when dark mode is enabled.

Secondly, I’m using view.theme.enable(); to implement dark mode in my custom UI because I primarily utilize Atlaskit elements.

Essentially, the problem I’m encountering is that the background color of the issues isn’t consistent. When opening an issue through “Your Work,” the background color differs from when it’s opened via the Kanban board.

As a result, the background color of my Forge application currently only matches the ticket’s background color when accessed through “My Work.” However, on the Kanban board, it appears darker compared to the rest.

How can I fix the problem?

3

Hi C11,

It depends on the global theme which you set on default it uses the “old” dark and light mode but if your instance already applied the new refreshed dark-/ light mode then you have to set to those too.

You can easily do that by using the setGlobalTheme() function of @atlaskit/tokens:

 setGlobalTheme({
         light: 'light-brand-refresh',
         dark: 'dark-brand-refresh',
         colorMode: 'auto',
}).catch(console.error);

I did that in my index.ts file, and it should automatically apply to all the components.