We also need a way to request a certain theme in iframes programmatically. Like others mentioned, wallboards are one example use case, though we also have others in mind (so just a wallboard-specific solution would not work for us).
How about something like this?
AP.setThemeOptions({
theme: 'dark' | 'light' | 'auto',
colorMode: 'dark' | 'light' | 'auto',
// and there’s room for other stuff later
})
How about something like this?
AP.setThemeOptions({ theme: 'dark' | 'light' | 'auto', colorMode: 'dark' | 'light' | 'auto', // and there’s room for other stuff later })
That would be the best solution, it would cover the wallboards case and any other cases that might arise in the future. This way we wouldn’t have to always ask Atlassian to deliver a specific change for each specific case / new feature apps need to deliver – apps would be able to do what they need, when they need.
Hi, we are testing the new dark theme integration with our app.
One thing we have noticed is the different CSS value for the background-color when the integration is displayed inside a Kanban view compared to the Issue view.
On the Kanban is used --ds-surface-overlay instead on the Issue is used --ds-surface. Since we don’t know if our app is displayed inside a Kanban or an Issue, we choose to set the background color as --ds-surface-overlay, but it doesn’t look so good in the Issue view.
How we can handle this difference of the background color ?
@AndreaSerra thanks for raising this! We are currently looking into a method for apps to receive information about the current surface they’re placed onto, and will provide updates once the API is available to use in Connect and Forge Custom UI apps.
In the meantime, we recommend using the surface that matches in the most places, or is seen most often by users - in the Jira Issue View this would be elevation.surface.
Let us know if you have any other questions, or other examples where this issue occurs.
Hey partners,
@atlaskit/tokens version 1.0.0 is coming soon and changes will be required in your apps — please get ready, but don’t upgrade to 1.0.0 yet. Read all the details here:
Cheers,
Stephen
Hey folks, the changes mentioned above will be rolling out on Mon 27 Feb 2023 — please read the thread for more details of actions required. Thanks!
These changes are now live for Connect!
Please go ahead and follow the instructions in the thread below to upgrade, and let us know of any questions or help needed:
Hi Stephen,
I have tried to call the window.AP.theming.initializeTheming() this morning but it doesn’t seem to work as before the 1.xxx changes.
I don’t see in the <html> part of the iframe any data-theme or data-color-mode attribute, so no color theme gets triggered.
If instead I call directly the setGlobalTheme API I see the styles being added to the <head> and the <html> containing the data-color-mode chosen.
The problem is it doesn’t reflect the Jira Personal Settings, because if you choose auto as colorMode it reflects the OS setting.
Am I missing something?
Hey @AndreaSerra,
There was a deployment issue yesterday that meant an older instance of all.js was persisted in prod.
We just fixed that so it should be functional again now. Could you give it a try and let us know if you have any further issues?
Cheers 
Today I’ve tried and it is working good, very nice ! 
We started implementing the dark mode patterns, but noticed a weird behaviour in the dialog iframe. Before (and still) in light mode, the iframe has a seemingly transparent background.
When the dark mode is turned on, the background of the whole iframe becomes filled.
Which persists even after calling AP.theming.initializeTheming()
Is this something we are doing wrong? After inspecting the HTML, the source of the filled iframe background remains unclear…
Something similar to what Leon describes also happens with dashboard gadgets: the iframe is drawn in white, before the actual iframe content loads. This causes 3rd party gadgets to always flash a white rectangle before they manage to enable theming.
Oh, it looks like this is an issue on our side. What I suspect happened is the previously transparent modal has been given a surface token. So when tokens are turned on it displays a coloured background as opposed to being see-through.
I’ll hand this feedback over to the team – Thanks!
Hey @DanielDelCore ,
I am a bit confused now - do I have to opt-in somewhere with a specific instance to access this method or should this now be available for everyone - I am confused by the timelines and rollouts.
I further heard at APP week Berlin that Atlassian rolls out features in an incremental approach, so can you can please confirm that this method should be available on all cloud instances - because for me it comes as undefined? But maybe I am also doing something wrong here.
window.AP.theming.initializeTheming()
So if you could once again elaborate on the exact steps I have to follow to enable my connect app to invoke this method that would be just awesome.
Thank you very much in advance for your time.
Best regards,
Martin
Hey @DanielDelCore, i noticed another issue.
When deactivating the Jira theming, AP.theming.initializeTheming() always sets the data-color-mode=“dark” attribute:
Seems like the initializeTheming() function doesnt respect the setting whether theming is enabled or not?
I appreciate it’s confusing right now during the roll-out. Yes, right now you need to let us know about your instance(s) to start developing with tokens and theming. I’ll recap…
Today — during early access program:
window.AP.theming.initializeTheming()
In the future — we’ll let you know the date:
window.AP.theming.initializeTheming()
Once your instance is enabled, follow the combined instructions we’ve published here:
Theming Connect Apps – developer.atlassian.com
(it combines what’s in the top of this thread + updated API in tokens 1.0.0)
The team are also currently working on improvements to atlassan.design so that all the docs for getting started with design tokens and theming is easier to find. I’ll share when that’s done.
And @LeonRothYasoon: Thanks for letting us know! That issue has been resolved and you should see the fix roll out in about 24 hours.
Cheers,
Stephen
Thank you very much for taking the time to summarize it again and thank you to all Atlassians working on the change towards a token-based approach I think it’s really great way! @stephenmok
I now submitted the google docs and would be looking forward to applying tokens to our connect apps.
Will I receive an e-mail when the instances I have submitted are activated for access the method below?
window.AP.theming.initializeTheming()
Thank you very much in advance!
Thanks for signing up!
I’ve just enabled your instance so you should have an email in your inbox detailing next steps.
Feel free to reach out here of via email if you have any further questions.
Cheers.
Dan.
Hi @stephenmok, @DanielDelCore! We’re still not seeing the correct behavior on our instances, any news about the deployment of the fixes?
Since we’re on the subject: I realize that this is still beta code and stuff can break. But it is extremely important that it should break only for users that have enabled theming in their lab features! If we can’t trust the code will not affect the clients who don’t enable (or know about) theming, then we can’t deploy the code to production at all, so nobody can beta test our app theming even if they want to.
The part of the code that checks the lab feature and does absolutely nothing if it’s disabled needs to be rock-solid.
There is no window.AP.theming method, it comes as undefined. Please help