Easy on the eyes: Dark mode in draw.io

Visualize everything, your way

Customization is at the core of draw.io, and dark mode forms a key part of this.

Just as visualization is paramount for presenting complex information in a digestible format, so is choosing the right background to allow you to diagram the way that you want. Whether you’re looking to reduce strain on the eyes, save some battery, or you simply like the aesthetics, draw.io’s dark mode feature further enhances your customization capabilities to align with your personal preferences.

Easily switch to dark mode

Switching to dark mode will invert the color scheme, thus maintaining contrast between the background, shapes and text. Easily switch to dark mode by:

In the top menu, head to Extras > Appearance, then choose from the following options:

• Automatic: Mirrors your operating system’s settings (Light or Dark mode).
• Light: Classic Light mode.
• Dark mode: draw.io in Dark mode – a low-light editor interface, helping reduce eye strain.
• High Contrast (available in light and dark mode): Maximizes the color difference between interface elements and background, making text and icons easier to read for improved accessibility. (Available in Light and Dark modes). Read more

Light, Dark, and High Contrast modes in the draw.io Diagram editor

Light, Dark, and High Contrast modes in the draw.io Board editor

FAQs

Is dark mode available for the draw.io Jira app?

Yes! For more information, see draw.io automatically applies your Jira Cloud theme to diagram thumbnails

Can I export my diagram in dark mode?

Yes, if you have dark mode set in the editor, when you export your diagram e.g. as a PNG, JPG, or SVG file, you will have the option to export the diagram in dark mode.

What happens if I share my diagram with others in Confluence?

Adjusting your diagram interface to light or dark will only affect your editor view. If you’re using draw.io in dark mode, and you share it with a teammate with their interface set to light mode, they will view the diagram in light mode. Therefore it’s always best to preview your diagram in both light and dark mode, to double-check how the diagram looks in both.

Fortunately, whether you’re using Automatic, Light, or Dark mode, your diagrams will automatically adjust. Any shapes, connectors, text, and background colors auto-adjust their intensity (lightness/darkness), but not their hue, meaning they’re optimized for both light and dark mode.

Want to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on social media and learn how others use draw.io, as well as pick up some helpful tips and tricks.