Announcing Confluence Cloud Theming Preview for Developer Canary Program

For the ones looking for colors which have the same contrast in dark and light mode, here are some:


@AlexWhite could you please have a look at this possible side effect of dark mode on forge app logos. All details here:

Thanks a lot :grinning:

1 Like

Hi @AlexWhite ,

Any updates on that announcement?

Also, are you logging somewhere publicly the list of known issues that you are still working on for dark mode? (I don’t know if I should restate known problems I have seen or if they are already in your queue.)


1 Like

@scott.dudley and everyone. We have posted a new topic regarding our rollout timeline and finalized documentation (approach is unchanged) is linked. See Confluence Cloud Theming Beta and GA

@clouless I have started a discussion about the Forge logo filtering with some of our Jira and Design System teams and will get back to you about this next week.

@andreas1 We noticed the regression of the header and footer colors in dark mode. It’s related to some recent Confluence AUI upgrades. We’ll address this very soon.

@marc We have not been able to reproduce the issue you’re seeing in static content macros. Do you have an example you can share? Also worth noting that our test app we use internally to validate functionality does not use inline styles but rather css classes. I don’t think that would make a difference but something we can check on.


Thanks @AlexWhite, also aui-button and form.aui .select class is not following the dark theme, see images comparing an aui-button on Confluence settings panel and the same css used inside the connect dialog

Edit: Sorry, I think I found the problem, we are using a very old AUI version for the buttons

Hi @AlexWhite ,
Thank you for your reply. We can get theming working when we use AUI classes in a static content macro. However we can’t use colors. Can you test the following in a static content macro:

 <div style="border-radius:4px;padding:4px;background-color:var(--ds-text-accent-lime);">
        lime lime
 <div style="border-radius:4px;padding:4px;" class="aui-lozenge aui-lozenge-subtle">
        lozenge lozenge, upcases all text!!
 <!-- The <button> element can't be used in a static content macro, thus use a <div> -->
 <div style="border-radius:4px;padding:4px;" class="aui-button" aria-disabled="true" >
        Button style

In our use case, the first div contains a color variable (using lime as an easily visible color only). This gets stripped by the Confluence parser. That means we can’t set any colors on our elements.
We can use AUI html classes, but the selection is very limited.

And you can’t use any js in static content macros.


@AlexWhite could you please add detailed guide about supporting dark themes in static macros?
All the linked docs and information above only applies to dynamic macros or other components where we can run custom JS/CSS.


@marc and @chhantyal We are investigating the shortcomings of the static content macros and will reply back with more guidance soon - within the next 2 weeks.

By chance - have you tried to extract these inline styles into your own CSS classes to apply custom colors?

Hi @AlexWhite ,
As far as I know, we can’t use our own CSS classes in static content macros.


Great! It’s gone GA before we got any solution to the issue we raised above about inline macros.


Hi @AlexWhite it’s been a bit more than 2 weeks. Do you have any guidance for us to enable dark mode in static macros? Meanwhile, our support channels are overloaded with requests from customers.

1 Like

@chhantyal You’re absolutely right! I apologize for the delay in the update.

We identified why the styles are being stripped - due to a sanitization step that occurs for all Atlassian-rendered macros (i.e. not in an iframe). We have a task that was just started in order to remedy this by allowing design tokens to pass through this sanitization. I will update this thread when that’s complete and available for you to try out.

Could you also share more about the requests from customers? Are these requests to support dark mode within your app(s)?




Are these requests to support dark mode within your app(s)?

Right, these are requests from customers to make the static macros usable when they enable dark mode.
Looking forward to your update!

@chhantyal I have created a public ticket for you to track this static content macro work. . We’re making some progress on it but it’s complicated since this sanitization exists for security purposes and needs to be done methodically and with careful review.

Could you share a snippet of the styles you are trying to apply? Are you just trying to use CSS variables for design tokens or other CSS properties?

Hi @AlexWhite . We’re also using static macros for instance:

<span style="
  display: inline-block;
  border: 1px solid #0052cc;
  width: fit-content;
  padding: 0 5px 0 5px;
  border-radius: 5px;
    <a href="${url!"#"}">${requirement.key}</a>

We would like to use design tokens for the background-color and border-color.