Hello again Marketplace Partners
Over the last 3+ months since we enabled user-driven themes for the Developer Canary Program (see post) we have added theming support for nearly all Confluence Cloud experiences that were previously missing. Additionally we have gathered feedback, polished existing token use, and even added a theming toggle in Presenter Mode.
As a reminder, apps that have not yet adopted theming will render poorly for users who have chosen to use dark mode. In our early rollout metrics, we’ve consistently seen over 60% of users turn to dark mode over light mode. See details below for how to adopt themes if you need more information.
We are also ready to share some timelines and details about the full rollout of theming to all customers as a Beta feature and then moving theming into General Availability (GA).
Timeline
- As early September 12 as all continuous release customers will have access to theming as a Beta feature and Light theme will become the new default theme. Customers on release tracks will get access to theming as part of the next bundled release after that.
- Over the next couple weeks we will be monitoring feedback and working on some solutions for items we’ve received consistent feedback on:
- dark mode support for admin-driven color scheme settings which affect the top navigation background color
- better legacy editor/pages support in dark mode
- As early as the end of September, we will transition into a phase of General Availability (GA) which indicates to all customers and you, our Marketplace partners, that we consider theming to be ready for mass, stable use. We expect that there will still be a few areas to refine but none that are preventing use of themes.
- At the end of October, we plan to remove Original as a “theme” option - Light will remain the default.
We’ve consciously chosen Light to become the new default as opposed to Match browser. This helps ensure more users have a good experience when viewing apps that don’t yet have support for dark mode.
Adopting Themes
In case you missed some of our earlier communication about how to add theming to your apps, we have recently finalized some documentation which formally solidifies theming in Confluence and makes no changes to the approach we’ve previously outlined.
Themes are driven by the Atlassian Design System’s “Design Tokens” which you can read more about and reference here.
Connect
- Connect apps should follow the approach as detailed in Theming Connect Apps. In particular, Connect apps would need to invoke window.AP.theming.initializeTheming().
- Invoke window.AP.theming.initializeTheming() as early as possible in your application startup to avoid any “flashing” of nonthemed elements before theming is applied. This will apply the appropriate data-theme and data-color-mode attributes to the tag based on the theme defined by Confluence.
Forge
- Forge apps using UI Kit without any color customizations will automatically inherit tokens.
- Forge apps using Custom UI will need to apply design tokens as described above. The implementation follows closely to what was described for Connect apps. See more about Theming Forge Apps. In particular, Forge Custom UI apps would need to invoke view.theme.enable():
- Invoke view.theme.enable() as early as possible in your application startup to avoid any “flashing” of nonthemed elements before theming is applied. This will apply the appropriate data-theme and data-color-mode attributes to the tag based on the theme defined by Confluence, consistent with the solution described above for Connect apps.
Questions/Feedback
For general feedback about the look and feel of themes, please use the feedback mechanism within the theme switcher within Confluence.
If you have questions about how to implement theming in your apps, please comment here in this topic.
If you have already added theming support or are planning to do so soon, please share your progress - we’d love to hear about it!