Use the diagram editor in dark mode

diagrams.net 27 Jul 2022

Share:

The Dark mode for the default, Minimal and Sketch editor themes lets you switch diagrams.net and our draw.io apps to match your operating system’s dark mode or night mode.
Use diagrams.net and draw.io in dark mode when using the default editor theme, as well as with the Minimal and Sketch editor themes

Go to app.diagrams.net/?splash=0&ui=dark to open the default editor in Dark mode.

Alternatively, select Dark mode via Extras > Theme > Dark and reload your browser tab to use this mode permanently.

Dark mode in Minimal or Sketch

When you switch to the Minimal or Sketch editor themes after using dark mode, the diagram editor will automatically enable dark mode in those themes.

If it doesn’t switch automatically, enable dark mode via the menu. Click on the menu and select Preferences > Theme > Dark to toggle dark mode in the Minimal or Sketch editor themes.
Use diagrams.net and draw.io in dark mode when using the Sketch editor themes

Diagramming in dark mode

There are a few things to keep in mind when diagramming in dark mode.

  • When collaborating on a diagram in Google Drive, Microsoft One Drive or in draw.io for Confluence, the others editing your diagram may not be using dark mode.

  • If you have set a default style, after you switch editor themes, make sure you reset that default style. Click on Clear Default Style in the Arrange tab in the format panel.

  • Dark mode will automatically invert the text colour so you can see labels - dark text on a light background becomes light text on a dark background.

  • The Style palette may automatically change to provide a selection of colours that look better on a dark background. Step through the different palettes with the left/right arrows.
    Change to a style palette to format shapes more visibly against a dark background when using the Dark editor theme in diagrams.net

  • Many (but not all) of the diagrams in the template library will switch to a colour palette that is better for dark backgrounds.

  • To export your diagram as an image (PNG, JPG or SVG) from the Dark theme and retain a dark background, make sure the Dark checkbox is enabled.
    Make sure to leave the Dark checkbox enabled when exporting a diagram as an image from the Dark editor theme

  • The unofficial draw.io extension for Visual Studio Code, developed by Henning Dieterichs, may automatically use dark mode in the diagram editor if your operating system/VSCode is set to dark mode.

  • Our draw.io Chrome extension for Notion works in dark mode to match Notion’s dark mode.
    Make sure to leave the Dark checkbox enabled when exporting a diagram as an image from the Dark editor theme

Set a different background colour

To diagram with a dark editor interface, but use a light drawing canvas, set a light background colour.

  1. Make sure nothing is selected in your diagram, then enable the Background checkbox in the Diagram tab in the format panel.
  2. Click on the colour button, select a colour from the palette or enter a colour code, and click Apply.
    Adding a diagram background will not automatically update the colours of shapes and connectors in your diagram

Note: Setting a diagram background colour will not automatically change the colours of shapes, connectors or text, so your diagram may be unreadable until you apply a new style to those elements. The background colour will be included when you export your diagram.

Further resources

If you find a shape that has an unreadable label when switched to dark mode (with no default style set), please raise an issue in our JGraph/drawio GitHub repository after searching to see if there is an existing issue for that problem.

Dark mode is works with three of the four diagram editor themes:

  • The default diagram editor.
  • Atlas - matches the draw.io app inside Atlassian’s Confluence and Jira. Dark mode is not available for this theme.
  • Minimal - floating dialogs for all tools.
  • Sketch - a simple online whiteboard (advanced features are available via menus and toolbars).

Follow us on GitHub, Twitter, Facebook.

Share: