Hi @AlexWhite
Do you have any updates yet on when dark theme is likely going to GA? Also, is there any progress that can be reported on any of the issues noted earlier in the comments section here?
Thanks!
Scott
@marc @Corentin @andreas1 @scott.dudley
My apologies for delays in answering these questions! Itâs been a busy summer with holidays and Confluence theming work!
Some quick updates:
- All apps should now be using the same Light and Dark theme color values as Confluence itself - please let us know if you see any discrepancy!
- Forge Custom UI theming solution is now functional - Forge apps that opt into theming will now automatically update when Confluence updates.
In response to some questions:
-
As for app icons, our current guidance is to choose icons which will present well in both Light and Dark modes. Consider following icon guidelines by Apple or Google and you should be in good shape. We may provide a customization for this at a later time but itâs not currently on the roadmap.
-
Weâve been methodically working through the Confluence codebase applying tokens in place of hard-coded original colors. You should be seeing less of these now, though, our efforts to identify and update all of them are ongoing. In situations where UI elements are created by the app, it may be a situation of the AUI version not being up-to-date. Tokens were added to AUI in version 9.7 so youâll want to prioritize updating to that version if youâre not already there or higher.
-
In some cases where you see brief flashes of light (unthemed) UI before the theme takes effect, weâve been improving these experiences over time. Weâll continue to make improvements as more scenarios are identified. Ultimately itâs related to loading in the theme styles and scripts very early in page load to avoid rendering anything before the theme is applied. This is sometimes easier said than done and is seen more prevalently when opening pages that are not assisted with SSR pre-rendering and that are full page renderings as opposed to a transition within a SPA. We appreciate reporting of these issues either here in the developer community forum or via the theme selector feedback mechanism.
Up Next:
Weâll be providing some documentation updates and more details on our rollout timeline by the end of next week. Our currently planned timeline has us moving into GA late September at the earliest. This is due to very positive results during our Alpha phase and no major feedback concerns from users.
1 Like
Hi @AlexWhite ,
thank you for the update.
Has your team looked into styling in static content macros? It seems that Confluence removes design tokens as part of the sanitization.
2 Likes
We see a similar issue, now the background of header and footer itâs fine but the text color is not correct
1 Like
For the ones looking for colors which have the same contrast in dark and light mode, here are some:
#1a89ac
#217cf1
#23922b
#6e8568
#7970e1
#9670ad
#9f5ee6
#c0626f
#c436f7
#d230de
#df38a1
#f11985
#f41478
#f91050
#fc0538
@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 
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.)
Thanks!
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.
2 Likes
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>
<div style="border-radius:4px;padding:4px;" class="aui-lozenge aui-lozenge-subtle">
lozenge lozenge, upcases all text!!
</div>
<!-- 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
</div>
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.
3 Likes
@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.
4 Likes
@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.
2 Likes
Great! Itâs gone GA before we got any solution to the issue we raised above about inline macros.
2 Likes
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)?
Thanks,
Alex
2 Likes
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. https://jira.atlassian.com/browse/CONFCLOUD-77050 . 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>
</span>
We would like to use design tokens for the background-color and border-color.