New dark theme is coming to Data Center

[MikeNi]

Hey Developer Community,

We are excited to announce that a dark theme for Data Center products is on the horizon! During Team23, we updated our public roadmap to include plans to ship dark theme for Data Center products, including Jira Software, Jira Service Management, Confluence, Bitbucket, and Bamboo.

We are now hard at work uplifting Data Center products to embed design tokens and new colors, which is in line with our recent endeavor in the Atlassian Design System.

Design tokens and the new color foundations will simplify the process for designers and engineers to build user experiences, make it easier to adjust color schemes (including improved contrast), and will support the theming feature that enables the dark theme within Data Center products.

By adopting these new design tokens, you will find it easier to build and update apps that offer a consistent and familiar experience within Atlassian products. You achieve this by utilizing the very same design tokens that we use, resulting in smooth alignment on the same color palette.

How Atlassian will help you onboard dark theme

We want to help you onboard to design tokens and prepare for dark themes in your Atlassian Marketplace apps. We also understand you’ll need to plan and allocate time in your product roadmaps, so we will update this space frequently with new information as we have it.

For now, you can find libraries of the new color palettes and design tokens here.

Coming soon:

• The new AUI with the design token will be ready in the coming months.
• Detailed guidance on how to use design tokens in your apps. This will help you in development, testing, and throughout your whole production.
• New tooling designed to help both designers and engineers migrate existing experiences/apps to use design tokens, including:
  • Codemods for template, style, and script files to move from hardcoded colors to tokens
  • Extensions to load certain tokens (and thus different themes) quickly
• Progressively, dark theme testing versions of our DC products will be released for you to test your apps with us.

We will continue to update you as these timelines develop. Please click subscribe and watch this post for our future updates. Should you have any questions, please leave a comment below.

We want to thank you all for your continued support, and we can’t wait to work with you to try out the new design tokens and bring dark themes to Data Center customers!

Cheers,
Atlassian Data Center Team

Update! 15th Sep 2023: We have released a Early Access Program for Bitbucket Data Center Dark Theme, please find details from

Dark theme EAP in Bitbucket Data Center

We’re thrilled to introduce early access to dark theme for Bitbucket Data Center! All partners can now test their apps with Atlassian Maven Plugin Suite (AMPS) by running the following command with the Atlassian Plugin SDK: atlas-run-standalone --product bitbucket --version 8.14.0-dark-theme-eap-1. Or you can download development release 8.14.0-eap01 and test your apps against it to check how dark theme works for them. The public release of dark theme will be rolled out along with one of the u…

[clouless]

Please provide a way to react to dark theme changes when an App uses Atlaskit+React on DC Jira Software, thanks.
Many vendors do not use AUI on Server/DC but atlaskit. Our app runs DC with atlaskit vor many years now without problems.
Thanks

[remie]

I second the request made by @clouless: please provide information on how to work with Dark Mode in a framework agnostic way. Will there be a frontend API made available? Will it be available in the AJS.Meta list? How will this work?

[chrschommer]

We are also using AtlasKit for our in-house UI framework and stopped using AUI a couple of years ago. A solution not forcing us to rewrite our UI framework would be great.

[rlander]

This is a welcome addition.

ScriptRunner uses a mix of AUI/AtlasKit, third party and bespoke components. We will require a method of determining the current theme in Javascript.

In terms of implementation, will users have to manually opt-in to the dark theme? Will you automatically enable it if the OS/browser is in dark mode? If the latter, that’s a lot of users suddenly using the dark theme when the ecosystem will take a while to catch up (if ever).

[OlehVasyliv]

Thanks for posing this.

It would be great to know how the app can get the current Jira DC theme name through JavaScript (e.g. AJS.something.here) or Java code.

Having a possibility to read the theme name in JavaScript through AJS is preferable.

[mkemp]

Hi all!

Please keep the feedback and concerns coming, I want to hear all of them (ping me directly)!

Disclaimer: Direction of below contents is subject to change. This is early stages to give y’all a heads up, so that you can plan accordingly, we’ll be issuing more updates as it becomes clearer which direction we’ll head.

We’re currently looking at using a super-set of Atlaskit design tokens, so all modern versions of AK should work automatically, and older versions can use the tokens through the theme provider.

I’d like to offer some reassurance, in DC we’re AK first for all revamped experiences, this is important for us too.

We understand there’s more than just AK and AUI out there (same for us), so we’re looking to make the CSS variables for each token effective API. We hope this in conjunction with codemods (again we’re still investigating) and EAP time will make the migration smooth for y’all and our customers. We hope this will also reduce KTLO with plugins that have shared code between DC and Cloud.

As for JS API, we’re unsure how/if this will land, again ideally it’s as similar to Cloud as possible. We’re currently leaning towards putting the customer experience (e.g. no flashes of white) and backwards-compatibility as higher priority than perfect API compatibility with Cloud.

We have some unknowns, namely:

• Look’n’feel support in all products
• Existing Dark Theme plugins for Jira and Confluence
• Existing Theme support in Confluence particularly is quite extensive
• The future of LESS - We’re on a very old version (V1) and it’s been the subject of vulnerabilities, but this a separate topic → CSS variables first

Thanks,
Michael

[rlander]

Thanks @mkemp, we’ll sit by and wait for an EAP, I’m sure we will have plenty more to ask when the first lands .

Here is a use case where a JS API would be necessary in ScriptRunner, we have UI elements where images are dynamically generated server side, currently in a light theme, we would need a mechanism for the client to request a dark variant of that image based on theme. This is not a CSS variables problem.

See example below, the charts are images:

Rest assured, ScriptRunner will jump right on any EAP once it lands.

[rlander]

I realise I may be jumping to a solution here, so any guidance on how best to handle cases like these would be appreciated.

[mkemp]

Sorry, didn’t mean to imply there’ll be no JS API, I’d like to have one, just unsure how different it’ll have to be. Yup, I think internally we have some similar use cases to Script Runner.

Some DC products have graphing libraries that generate images, as an aside, I’d like to move them to something client-side and interactive for a few reasons: prettiness/moderness, potentially a11y (unsure if it’ll move the needle), and - something more relevant - ability to change between Dark and Light theme with the sun without reloading the page.

If anyone has anymore use cases where anything else would get in the way of transistioning between themes without a page reload, I’d love to hear about it to see if we can solve it.

[rlander]

@mkemp

As for JS API, we’re unsure how/if this will land

Is where I got the implication there was a potential for no JS API at all. Of course the ideal is everything just uses CSS variables via design tokens, but there will be edge cases, welcome to Data Center

Likewise, it would be ideal if we used a client side chart library, we’ve looked at it in the past, would need to convert RRD data into something consumable by a client component.

[clouless]

Sounds great, we also want to test out any EAP early.
As for Atlaskit and Theme support, last time I checked not all components were up to date to the latest theme api. Would be great to have that aligned Maybe you could provide some more documentation on how theme switch will work for DC then I can include that in our standalone frontend Jira mocks used for testing.

Great that Atlassian will tackle this feature

[steve.behnke]

My users will be very happy to hear this, and I’m excited to update my plugins to match the look and feel.

[mkemp]

@rlander

Is where I got the implication there was a potential for no JS API at all.

Yup, that’s what I get for trying to restructure my reply with cut’n’paste, my bad.

@rlander

would need to convert RRD data into something consumable by a client component.

Potentially same, but we’re still figuring out what goes in product UI and what should be in external systems, but I’m no longer working in that area so I’ll re-raise this with the approriate sister teams, and ask them to give an update once they figure it out.

[mkemp]

@clouless

As for Atlaskit and Theme support, last time I checked not all components were up to date to the latest theme api

Everything component we’ve used internally in the DC products has got native tokens support. We probably won’t be upgrading AK components right away (we feel the pain too), so we’ll probably be using Theme as the intermediary.

If anyone has got a some specific components with problems, I’d love to hear it and I can pass that on to the design system team.

@clouless

Maybe you could provide some more documentation on how theme switch will work for DC then I can include that in our standalone frontend Jira mocks used for testing.

Will do when we figure it out, this is still early stages for us, y’all probably further ahead of us with supporting the Cloud products

[MikeNi]

Thank you for all the valuable comments and feedback you’ve provided thus far. Your input is incredibly helpful in ensuring that we address your requests effectively. We understand that as the comments list grows longer, it may become challenging to keep track of our important updates regarding the release of our dark theme tools, documentation, and test versions.

To ensure that you stay informed when these test versions and tools become available, we have created a Google form where you can enter your contact information. Rest assured, filling out this form is entirely voluntary and optional. We will continually update this post in the community with the latest news from Atlassian.

Here is the LINK to the Google Form

Once again, we sincerely appreciate your engagement and look forward to keeping you informed about our latest developments.

[MichaelHedman]

As much as I love the new themes and dark mode, you have a ton of customer requested issues that have been around for ages, such as a release manager role that gives access to create releases wilthout requiring project admin role. Can you take a look at some of these other things?

[mkemp]

There’s lots of things that influence what we pick up, and our process for doing that is always changing. Sometimes it’s a scale or performance blocker, sometimes it’s an architectural security flaw, sometimes it’s a highly-requested feature. The only consistent things I’ve seen is that we’re always looking for the most impactful thing we can deliver for customers and that having a highly voted JAC issue is how to get eyes on something for ShipIt. We chose Dark Theme was consistently either the top or certainly within the top-5 highly requested features (regardless of how we broke it down) for each of the products.

To drum up support for something you’d like to see, create a jira.atlassian.com ticket if it doesn’t already exist and post a thread in the relavant (developer or user) community forum (which would be sick since we’re getting off topic now).