Strange, the data elements get populated on my instance:
Maybe its not rolled out completely?
Maybe, but I was in the EAP.
It gets even more fun for us - one of our apps - it shows up every other page load…
Hi,
I am currently facing a challenge with the display of our app icon, as well as other icons specified in the manifest.yml file, across different themes. At present, they appear as black on a dark background, which makes them difficult to discern.
Here is a screenshot for reference:
I suspect I might be overlooking a crucial detail. Could anyone provide guidance on how to ensure these icons display correctly in both light and dark themes?
That makes me feel better, or at least not alone. What the dickens?!
I’m embarrassed to report that the root cause was a knucklehead behind the keyboard who hadn’t set the theme in his user profile.
2 Likes
@KeidiGjika: The “Original theme” refers to the previous (legacy) color system in use before design tokens were implemented in our products. The new and old systems use different color palettes, which are subtlety different so we have decided to expose both while we’re in beta. When we move into GA, we will remove the legacy theme and only offer the token-based themes 
Under the hood, these are just CSS custom properties, where the fallback value is just the color that existed prior to tokens: var(--ds-design-token, #eee) ie #eee.
@lexek-92: I’ll ask around and see where that’s up to. Are you on the latest version? If not could you bump and see if it has been migrated?
@danielwester that’s strange! Anything I can help with there? Happy to jump on a call again to see if we can diagnose the problem.
@david.pinn glad to hear you solve the issue. I’ve done that myself so many times 
Ah, yes this is a known issue that we’re looking into at the moment.
We’ll get back to you once there is a workaround
1 Like
I noticed that the apps menu features a SVG filter that applies only to Connect apps, not Forge apparently. This filter is not present in the project left hand navigation for example, which is why its possible to put a colored icon there but not in the apps menu. The colored icons work well with both themes.
Good:
Bad:
Yes, but it was updated last time 8 months ago and it depends on "@atlaskit/tokens": "^0.10.0" at the moment.
Would be great if it was at least integrated into atlaskit dependency upgrade cycle if it’s not actively mantained. Or, alternatively, published as open source (it’s also not included in the frontend mirror) so consumers could fork it for future updates.
1 Like
Hi,
We’re having some issues with color.border token being semi-transparent, it is causing odd interactions with backgrounds or other collapsing borders (eg in tables). And color.border.accent.gray is too much for these cases.
Is it possible to introduce non-transparent color.border token alternative?
We can’t get themes to work on our forge apps because of this content security policy:
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’”
Essentially, the CSP policy prohibits downloading the CSS from the Atlassian CDN, and we cannot enable it manually. The only option allowed in the Forge manifest’s content styles permission section is “unsafe-inline.”
Where are we going wrong?
2 Likes
Hi Folks,
We hope this message finds you well. We have some exciting news to share with you regarding the upcoming General Availability (GA) of Dark Theme for our customers. We are thrilled to inform you that we are now in the final stretch of the development process!
First and foremost, we would like to announce that our marketing activities for the Dark Theme will commence from 20th of June onwards. This campaign aims to generate awareness and excitement among users, showcasing the enhanced visual experience and the added flexibility that Dark Theme brings to Jira’s suite of Cloud products.
As we approach the GA release, we want to emphasise the importance of migrating to design tokens if you haven’t done so already. Adopting design tokens will not only enable a smoother integration of Dark Theme into your apps but also greatly enhance the overall user experience. Aligning on this approach will prevent your app from appearing disjointed for users who have opted to turn on Dark Theme. We strongly encourage you to take advantage of this opportunity to leverage design tokens and create a consistent and visually appealing user interface.
Furthermore, we anticipate that the upcoming marketing campaign will drive increased usage. To ensure that you have a positive experience during this period, we recommend that your app is ready to meet the growing demand and minimise any user concerns. Migrating to design tokens will position your app to provide a seamless experience, reducing the likelihood of users encountering an inconsistent UI between Jira products and marketplace apps. Importantly, adopting design tokens allows your apps to automatically benefit from any future iterations to Atlassian’s color system.
To assist you in the migration process, we have compiled comprehensive documentation and resources. We encourage you to refer to the following links for more information and instructions:
- Connect Theming Documentation: Theming Connect Apps
- Forge Theming Documentation: Design tokens and theming
These resources will provide you with detailed guidance on how to integrate design tokens in your apps to enable theming. We are confident the documentation will support a smooth and successful transition, but if you have any questions please share via this thread as we’ll continue to monitor leading into GA.
We would like to express our sincere gratitude for your continued support and active participation in our marketplace community. We truly appreciate your partnership and believe that together we can make Dark Theme a resounding success.
Thank you for being a valued member of our marketplace community. We look forward to celebrating the GA release of Dark Theme with you and ensuring a positive experience for both you and your users.
2 Likes
For us the jql-editor is dark-mode enabled:
“@atlassianlabs/jql-editor-connect”: “^1.0.2”,
/Daniel
1 Like
@DanielDelCore dark mode just stopped working over the weekend. I opened some of the apps that had this support and worked fine last week, but now it does not apply html tag when AP.theming.initializeTheming() is called. Is this some known issue?
@DanielDelCore
We are seeing the same issue as @RaimisJ.
And it is also true for Atlassian Apps, e.g. automation:
Hey @lexek-92 & @danielwester
RE: @atlassianlabs/jql-editor I’ve located the owner they’re going to cut a new release this Thursday. Will let you know how it’s goes.
We’re having some issues with
color.bordertoken being semi-transparent, it is causing odd interactions with backgrounds or other collapsing borders (eg in tables). Andcolor.border.accent.grayis too much for these cases.
This is a known issue, we’ll pick this up ASAP but for now i’d recommend using the token and/or only applying the border to bottom & right borders (totally undesirable I know, my apologies).
@alessandrodistefano I’ll look into the CSP issues for you and get back to you.
@RaimisJ & @andreas.schmidt, thanks for reporting this! We’re investigating right now!
1 Like
@DanielDelCore this is now working, but I see some color changes for dark mode colors (e.g. --ds-surface-raised color changed). Is this temporary or permanent? Is there a complete list on what did change?