Start using design tokens in your apps, and try dark theme in Jira Cloud

Atlassian Ecosystem Design Ecosystem Design Announcements
41

Appreciate the question @bbutnaru, and very exciting to hear that your app is mostly ready! :raised_hands:

If I understand you correctly, you want to be able to see what’s coming soon (via early access on dev/test instances), but also what customers see (in a different test instance), even in the middle of a roll-out?

For the first part, all of your test instances that you’ve enrolled as part of early access for tokens/theming specifically (by filling in the form) will be where you can test in advance for sure. For the second part, I’ll check with the relevant teams about the details and get back to you.

Cheers,
Stephen

42

Yes @stephenmok. To be clear, in the middle of a rollout we can get a support request from a customer before the new feature has been rolled out on their instance, but after it was rolled out to all of our test instances. In that case, we can no longer reproduce the customer’s setup to debug their issue.

43

Hi @stephenmok,

We’re glad the themes will start to be enabled on customer instances next week, this is great news. Is it possible for us to know when the rollout is expected to be completed on all customer instances? Is this expected to be completed by the end of the next week or does the progressive rollout generally take longer?

Best regards,
Dan

44

Hey @dmihalache & @bbutnaru :wave:

Is it possible for us to know when the rollout is expected to be completed on all customer instances?

Our roll-out will commence today and we expect to be complete by tomorrow 5 pm (AEDT). We’ll keep this thread posted with updates if anything changes.

For clarity we’ve chosen a more speedy release strategy, given we’re also behind the Dark Mode Jira Labs toggle, which progresses as follows:
Immediately 10% => after 3 hours 50% => after 24 hours 100%.

in the middle of a rollout we can get a support request from a customer before the new feature has been rolled out on their instance, but after it was rolled out to all of our test instances. In that case, we can no longer reproduce the customer’s setup to debug their issue.

@bbutnaru in this case, you can let me know if there are instances you would like me to temporarily disable so you can test your app.

1 Like
45

Hey all,

Can now confirm that our Connect + Tokens integration is now at 100% availability in production :tada:
Please let me know if you spot any issues.

Cheers,
Daniel!

1 Like
46

Hey Daniel,

we released a new version of our integration and it looks great !

Screenshot 2023-03-28 at 11.35.31
Screenshot 2023-03-28 at 11.35.311540×732 79.4 KB

We have just seen sometimes a quick white background before loading the CSS theme, I think due the CSS styles loaded dynamically by the call to initializeTheming().

Do you think a possible solution could be allowing the iframe to be transparent on your part or can break some compatibility ?

3 Likes
47

@DanielDelCore Still seeing this happen, the issue modal surface is lighter than the standard surface, please check the screenshot.

Is this intended? Should we apply a different surface token when in the issue modal?

1 Like
48

Hey @LeonRothYasoon, this is a known issue that we’ll provide some sort of API for to get this resolved. We’ll come back to you with a solution shortly.

@AndreaSerra, this can happen depending on where the initializeTheming() method is called.
We recommend calling this in a blocking script tag to avoid the flash:

<HTML data-theme="dark" data-color-mode="dark">
  <head>

  </head>
  <body>
     <script>
          window.AP.theming.initializeTheming();
     </script>
  </body>
</HTML>

Can you share any of your implementation details with us so we can troubleshoot?

1 Like
49

We call the initializeTheming() method as soon the https://connect-cdn.atl-paas.net/all.js gets loaded by our client library placed in the <head>.

But I’ve also tried to remove all our code and leave only the AP library in the header and the initializeTheming() in the body with the same result: sometimes it flickers.

#balsamiq-panel-body {
    background: var(--ds-surface-overlay,#ffffff);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
       <script src="https://connect-cdn.atl-paas.net/all.js"></script>
  </head>
  <body id="balsamiq-panel-body">
     <script>
          window.AP.theming.initializeTheming();
     </script>
  </body>
</html>
1 Like
50

Not an Atlassian, but you’ll want to move it up.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
       <script src="https://connect-cdn.atl-paas.net/all.js"></script>
     <script>
          window.AP.theming.initializeTheming();
     </script>
  </head>
  <body id="balsamiq-panel-body">
  </body>
</html>

That way the FOUC is minimized. In this one case you’ll probably want to go against every web frontend performance guidance and have that even before css etc.

We will still have to deal with that the all.js is loaded on a cdn - so you can still get some “fun” issues there but at least moving the call out of the body makes the browser not render the body…

1 Like
51

Sigh,… @AndreasSerra unfortunately - I must say that I was wrong - at least if you’re using an Issue Activity Panel.

We’re doing the above there and getting the Atlassian White Page Flash. :frowning:

52

Hey @DanielDelCore, is there any update on the dark mode modal having a filled background? This is still happening.

53

Hey @LeonRothYasoon,

This is a known issue that we need to build a solution for by defining some way to pass the correct surface colour down to apps so they are always shown correctly, regardless if the app is shown in a modal or in its own page :slightly_smiling_face:

We’re scoping out this issue now, but in the meantime your surface colour usage is correct, I recommend continuing to use it until we’re able to provide you with an API to fix this :+1:

Cheers,
Daniel

1 Like
54

Hi folks,

As you may have heard at Team ‘23, or read the update on our Jira Community article, light and dark themes in Jira are now officially in beta for all customers!

This means the theme switcher has moved out of Jira labs and into the main section of personal settings, and we’re firing up the hype machine. Tell everyone you know to try it out and provide feedback! We will be listening and making further tweaks.

Thanks to all of you who joined the early access program to try out design tokens and theming, and provide feedback — we couldn’t have got here without you. I want to especially acknowledge a few early adopter partners who collaborated with us, and worked hard to have apps ready so quickly for our mutual customers:

JXL for Jira by Fine Software — a special thank you for all of your valuable feedback right from the start as a pilot program partner, helping us improve the API, and building experiences that are a great showcase of what can be achieved by embracing design tokens. In Fine Software’s words:

We adopted the new design tokens and implemented themes in JXL for Jira together with a big enhancement of the conditional formatting feature in our issue tables. It now has a 90-shades colour spectrum that instantly adjusts to the theme. As always, we poured a lot of design love and attention to detail into it and it turned out just perfect. Check it out yourself.

Appfire — with multiple apps on the Marketplace, Appfire made time to showcase their progress with our team and share feedback on early iterations of the tooling. As Appfire writes:

Appfire maintains its own design system, so part of the process of implementing this feature across our product ecosystem meant ensuring that global dark mode in Atlassian works seamlessly with Appfire’s own implementation of dark mode. We’re thrilled to announce that we’ve rolled out dark mode in Issue Matrix for Jira as part of the pilot program (with JSU not far behind), and we’re looking forward to enabling this feature on more apps, so our customers can fully customize their Atlassian sites.

Tempo — rallying a team to migrate key experiences for many Jira users, in one of the most requested Marketplace apps. Straight from Tempo:

Exciting news for those using Timesheets by Tempo within Jira! Tempo now supports dark mode when planning or logging time in the issue view. This new enhancement provides a more seamless experience for Tempo and Jira users — in addition to helping reduce eye strain and providing more comfort when working in low-light conditions.

Looking ahead, we’ll continue to listening to feedback and iterate as we head towards general availability.

Getting started now to migrate your apps? Awesome, great to have you onboard! Check out the instructions in one page for Connect apps and read all about design tokens on atlassian.design. Got questions? Ask right here!

We are currently working on subtle tweaks to dark theme to improve contrast and readability based on feedback. Expect to see changes including lighter surfaces to be rolled out in the next few weeks (during the beta). The power of design tokens means if you’re using tokens, there will be no code change required for Marketplace apps, though we encourage everyone to test and share feedback. If you are using a custom dark theme in your app, we recommend inspecting and making any similar tweaks as needed.

For developers of Marketplace apps built with Forge, we will be enabling those apps to be themed for all Jira customers the next two weeks, after Team '23 concludes. As with the Connect roll-out, you will be in control via an opt-in in your app — customers who have themes turned on in Jira settings will see your app in light/dark theme as soon as your app is updated with the opt-in.

You may have also heard that Trello has joined the party! Light and dark themes are coming to Trello, powered by the same design tokens from the Atlassian Design System. Are you also a Trello Power-Up developer? Check out Join the color theme early access program for Power-Up developers!

Lastly, among the many announcements at Team '23, dark theme will be coming to Data Centre products too. We will have more to share in the coming months about how to best develop and support themes in apps available for both Cloud and Data Centre products.

Cheers,
Stephen
Engineering Manager, Atlassian Design System

4 Likes
55

@DanielDelCore @stephenmok

Good progress! What is the best channel for giving you feedback during the beta?

We are still having white flash for dashboard items provided by our app. This happens before the iframe loads any HTML, so it can’t be fixed by anything that we do inside our iframes. I still get the flash even with a minimal HTML document loaded from cache in 1ms. This happens every time a dashboard is loaded, edited, or saved, and when gadgets are refreshed, and even when the gadgets are dragged-and-dropped around the dashboard:

image
image1406×595 74.9 KB

2 Likes
56

I set up theme switching in our team’s Forge Custom UI app but I am facing an issue.

The dark theme only works when I set the Theme to “Matching system” and my system (Mac) is in Dark Mode. (the html tag displays the correct “data-color-mode” and “data-theme”…“data-color-mode” switches appropriately when I switch the theme of my Mac to Dark/Light)

When I set the theme to Dark in Jira, the theme of the app does not switch to dark mode. It stays in light mode. Is there something I’m doing wrong?

57

Hi @KeidiGjika

This sounds like a bug in the current theming functionality on Forge. However, we are currently working on deploying our previously announced API changes and are aiming to release them by the end of next week (5th of May).

Once this is done, it will work similarly to Connect. There will be a method that needs to be called in order to enable theming and, once done, it will keep the theme in sync with Jira.

Lastly, as Stephen previously mentioned, theming in Forge isn’t visible to Jira customers at this stage but it will be once the changes mentioned above are released. :slightly_smiling_face:

58

Hi @bbutnaru

Please feel free to leave feedback here. :slightly_smiling_face:

To minimise the white flash, it would be good to load Connect and call window.AP.theming.initializeTheming() as the first thing your app does. If your app is a SPA, you would ideally want this to happen before the app’s own JS files are loaded.

In addition to that, you can set the background of the element containing your app (like <div id="root">) to the relevant surface or background design token. E.g. <style>#root { background: var(--ds-surface) }</style>

With that said, there can still be a white flash at times. We are working on a more permanent solution to this on our end and will keep you updated.

59

Thank you for the notice Julian. I will be waiting for the changes for Forge apps.

60

Hi @JulianLundman, thanks for the update.

Yes, we are already doing all this. The first thing in the <head> of our gadget iframes is the all.js script, then an inline <script> that calls initializeTheming, and only then the rest of the resources.

That still leaves a white flash on every load. As far as we can tell, this is because of how the <iframe> element is styled before the iframe content loads, so what we do inside our pages does not matter at all. Even if the iframe content is just <html style="background: black"></html> we still get a white flash.

The true solution is for the Jira dashboard code to make all gadget <iframe> elements transparent and let the src document fill them with visible content. Note that this seems to be dashboard-specific, we don’t see the same flash on full page iframes.

1 Like