Forge Bridge view Dark theme has different --ds-surface color

Forge Forge UI Kit and Custom UI
1

In dark mode using @forge/bridge view.theme.enable, the surface color is different to the rest of Jira.

Jira has a surface color of #1F1F21, while we’re served up #1D2125 which looks like this:

Screenshot from 2025-07-21 23-08-47
Screenshot from 2025-07-21 23-08-47188×115 2.39 KB

This happens elsewhere when the surface is raised as well, making it tricky to match theme looks.

Is this a bug?

Cheers,
Peter

2

Flagged this with the Forge UI Team, they will reach out shortly.

3

Hi @PeterMcNeil2 , yes I can confirm this is a bug and Forge is currently serving the wrong design tokens. You can follow this public ticket here for updates https://jira.atlassian.com/browse/ECO-979

4

It appears to be serving colors according to Atlassian Design System . However, the product itself is not using its own guidelines.

Where can we at least get the list of current colors the products are using?

Thanks.

5

Hi all, we have pushed a fix to update the .css files served by the Forge bridge. It uses the @atlaskit/tokens package under the hood so this should act as the source of truth.

You could also access the tokens directly by following the ADS instructions: https://atlassian.design/components/tokens/code. (Note you can only use the tokens, the other functions will not work as expected this way)

i.e. in your Custom UI app

import React from 'react';

import { token } from '@atlaskit/tokens';


function App() {

return (

<p style={{ color: token('color.text.accent.lime') }}>Hello from my Custom UI App using Atlaskit tokens </p>

  );

}

export default App;

(assuming you have unsafe inline styles enabled in your manifest.yml):

permissions:  
  content: 
    styles:
      - 'unsafe-inline'
6

@JeanYap

I’ve updated @forge/bridge and @atlaskit/tokens to the latest versions but I’m still not seeing the Forge issue panel use the correct surface colour when its on a raised surface. The surface colour code in the view.context has changed but the actual panel still takes the same colour.

A strange thing is if I remove view.theme.enable() and then readd it whilst tunneling into the app, the background colour is correct, but when I refresh the page its gone back to the wrong (but correct theme) surface colour.

Any advice?

7

The theme doesn’t know if your frame is on a raised surface, you’d have to set that. So in in the issue context, if your frame will be on the raised backgroupd/surface you need to explicitly set your background color.