Announcing Confluence Cloud Theming Preview for Developer Canary Program

[andreas1]

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

[clouless]

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

Jira Cloud App Logo

Yes … I have observed the filter being applied in DarkMode and its really creating issue with the App logo since there is no option to change the logo for Dark mode Refer- Announcing Confluence Cloud Theming Preview for Developer Canary Program - #3 by AlexWhite

Thanks a lot

[scott.dudley]

@AlexWhite

We’ll be providing some documentation updates and more details on our rollout timeline by the end of next week.

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!

[AlexWhite]

@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.

[AndreaSerra]

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

[marc]

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.

[chhantyal]

@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.

[AlexWhite]

@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?

[marc]

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

[AlexWhite]

Confluence Cloud Theming Beta and GA

Hello everyone! We are pleased to call Theming in Confluence Cloud Generally Available (GA) . Please see our community post for more information. We know many marketplace partners are still working through adding theming support and are here to help answer questions. As always, please share both your issues and your successes so we know how things are going.

[chhantyal]

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

[chhantyal]

@AlexWhite

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

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.

[AlexWhite]

@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

[chhantyal]

@AlexWhite

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!

[AlexWhite]

@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?

[Corentin]

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.

[DeepakSharma]

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

[AlexWhite]

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.

[UmeshChaudhary]

Hi @AlexWhite If we want to achieve the effect of applying dark colors on a light theme and vice versa using CSS on image like svg, how can we do it? Can you please provide some sample code ?
I have similar use case as @DeepakSharma .

Thanks & Regards,
Umesh

[DeepakSharma]

Hi @AlexWhite ,

I had created a ECOHELP ticket long back in Nov-23: ECOHELP-29849 . After discussion in the ticket it was said that they have created this CONFCLOUD ticket - https://jira.atlassian.com/browse/CONFCLOUD-77050 was given. In this ticket also our team had posted a comment to whitelist the css for static macro.

Now again after 6 months we are being asked to create a ticket for the same. Please help on this.

Thanks & Regards,
Deepak Sharma