draw.io automatically applies your Jira Cloud theme to diagram thumbnails

draw.io 15 Jun 2023


Atlassian has just released a dark theme for Jira Cloud for users who don’t like working on light backgrounds. With Jira’s new dark theme, draw.io diagram thumbnails in a Jira issue now automatically reflect your selected theme.
draw.io automatically changes the colours in your diagrams to match your Jira Cloud dark or light theme

draw.io has had a dark mode for some time, but diagrams attached to Jira issues displayed on a light background, whether or not you were using the dark mode in the draw.io editor.

Learn more about diagramming with draw.io in Jira

Diagrams on dark backgrounds

draw.io makes an intelligent guess about text and shape fill colours to keep your diagrams readable when you switch between dark and light. However, many styles in the palette have been designed for a light editor theme, and may not look good on a dark background (and vice versa).

As your team members can use their preferred dark or light theme, and the diagram thumbnail will match their theme, it’s best to double check that your diagram is legible in both.

  1. Click on the Edit pencil in the toolbar when you hover over diagram thumbnail in a Jira issue to edit it with draw.io. If you don’t see this section, click on the draw.io section at the top.
    Click on the edit button when hovering over a diagram in a Jira issue to open it in draw.io
  2. Click on the sun or moon in the top right to switch to the opposite theme - either Dark or Light_ - and check that your diagram is still readable on that background.
    Click on the sun or moon in the top right of the draw.io editor to change the editor mode to dark or light

Choose Automatic to make the draw.io editor automatically match your operating system’s mode (dark mode or light mode).

Note: Switching to dark or light mode in the draw.io editor will not affect the thumbnail on the Jira issue - whether it appears on a dark or light background is based on the Jira theme that the user looking at the issue has chosen.

To use draw.io in dark mode on the web, go to app.diagrams.net/?splash=0&ui=dark, or switch modes via the sun/moon icon in the top right or via the draw.io menu.

Set a background colour in a diagram

If you want your diagram to only ever be on a dark or a light background, and not switch to match the user’s Jira Cloud theme, you’ll need to set a background colour.

  1. Open the diagram from the Jira issue in the draw.io editor.
  2. Make sure nothing is selected in your diagram, then enable the Background checkbox in the Diagram tab in the format panel.
  3. Click on the colour button, select a colour from the palette or enter a colour code, and click Apply.
    Adding a diagram background ensures your diagram looks the same in both Jira's light and dark themes

This background colour is displayed in the diagram thumbnail in the Jira issue in both Jira’s dark and light themes.
Adding a diagram background ensures your diagram looks the same in both Jira's light and dark themes

Follow us on GitHub, Twitter, Facebook.