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.
1 Like
Hi @AlexWhite ,
I see that following ticket has been closed - https://jira.atlassian.com/browse/CONFCLOUD-77050. I tried to apply the css to an image tag and I see that the css is still getting stripped out in static content macro. I am trying to apply filter css as given below -
<img style="filter: invert(1); mix-blend-mode: difference;"
src="{{dataUri}}" />
How do we apply the filter css here?
Thanks & Regards
Deepak
Hi @DeepakSharma Apologies for the confusion. The ticket that was closed has a scope of allowing CSS variables so that apps can utilize the Atlassian Design Systemâs design tokens (an example would be from this comment. Other CSS properties and values can still be stripped based on sanitization logic. If you would like additional CSS properties and/or values to be considered for future whitelisting, please create a CONFCLOUD suggestion. This is not a bug as itâs working by design.