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();
4 Likes
3

Is there currently an issue with Jira Forge App Dark theme?

I cannot get it to work and in the console these errors show up:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
_hostname_foo.atlassian.net/:1 Refused to load the stylesheet 'https://forge.cdn.prod.atlassian-dev.net/atlaskit-tokens_dark.css' because it violates the following Content Security Policy directive: "style-src 'unsafe-inline' 'self'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
4

@clouless You got a Content Security Policy directive violation.

Probably adding the following to your manifest will fix the issue

permissions:
  content:
      styles:
        - unsafe-inline

See Is it possible to use AtlasKit in Custom UI app without unsafe-inline?

1 Like
5

Hi fabien,
Thanks. I thought about something like this too. But I have that exact permission in place from the start. My app is listed in the marketplace for one year now with this permission in place.

I opened ECOHELP-42632 and hope to get this resolved.

Do you have a jira forge custom ui app with a globalPage module that works with dark mode?

Thanks

6

@clouless Yes I do.

Did enable theme

import React from 'react'
import { view } from '@forge/bridge'

function App () {
  view.theme.enable().then()

  return (
    <>
       <MyComponent />
    </>
  )
}

export default App

And the manifest permissions

permissions:
  content:
    scripts:
      - 'unsafe-inline'
      - 'unsafe-eval'
      - 'unsafe-hashes'
    styles:
      - 'unsafe-inline'
  scopes:
    - storage:app
    - read:confluence-content.summary
    - readonly:content.attachment:confluence
    - read:confluence-props
    - read:confluence-user
    - write:confluence-space
    - write:confluence-groups
    - write:confluence-props
    - write:confluence-content
    - write:label:confluence
    - read:confluence-space.summary
    - read:jira-work
    - read:jira-user
    - write:jira-work
    - manage:jira-project
    - manage:jira-configuration
  external:
    images:
      - '*.atlassian.net'

Don’t know exactly what line in the manifest is making theming working.

Please also note that if you are running on macOS and using Safari, then tunneling does not work. Safari considers page content from tunnel unsecure and blocks the content.
I advise to debug with tunnel using Google Chrome.

Hope that help :slight_smile: !

1 Like
7

Hi,
Thanks again. I double checked and I am doing exactly that. And I also deployed the app to development and get the same error.

I have one Confluence App working with dark mode and Jira 10 Data Center App too.

Very strange… I hope the engineers in the ECOEHELP ticket can resolve this :slight_smile:

8

I got it working. Turns out it was and old entry in the public/index.html that was in conflict with the new manifest content permissions.

I deleted this:

    <meta
      http-equiv="Content-Security-Policy"
      content="style-src 'unsafe-inline' 'self'"
    /><!-- needed to allow inline styles of styled-components -->

:white_check_mark: and now it works :slight_smile:

1 Like
10

Hi,
If I want to change my Custom UI component to dark modee when jira users change the
theme from light to dark, then can we listen to the theme change event and then change
the theme mode of my Forge App to dark mode?
Thanks,
YY1

11

Hi @anguila
May I know if there’s anything else that needs to be done with thw 2 lines of code?
My Forge App has supported dark mode. After theme switch from light to dark, the app is not automatically updated and I have to refresh the whole page to get the dark app working.
I’m still struggling with this issue. Please help me take a look.
Thanks,
YY1