Skip to main content

Adaptive colours for dark and light mode

When you change from light to dark mode in draw.io, the colours automatically switch intensity so that your diagram and its labels are easy to read. You can set now specific colours for shapes, connectors, text and the diagram page background for both light and dark modes via the updated colour palette.
An additional custom colour scheme has been added to the style palette in draw.io

Adaptive colours are important when part of your team prefers to work in dark mode, and the rest prefers light mode.

Set a specific dark and light colour​

  1. Select one or more shapes, connectors, text labels, or the diagram background, then click on a colour block to open the colour palette, for example, the Fill colour of a shape.
    Select one or more shapes and open the colour palette
  2. Click Advanced to see the dark mode colour settings in the palette.
    Select one or more shapes and open the colour palette
  3. Enter a colour value in the Light mode field (sun). The dark mode value will update automatically to its inverse if you are using the Automatic adaptive colour setting.
  4. To use a specific dark mode colour instead, enter a different colour value in the Dark mode field (moon). This colour is now User-defined.
    Select one or more shapes and open the colour palette
  5. Click away from the dialog to save the colour style to your selected shapes, connectors, text or diagram page background.

You'll notice that the colour block now has two triangles, in both dark and light mode.
Change the adaptive colours settings on a diagram in draw.io via the Extras menu or the Style tab in the format panel when nothing is selected

Tip: To use the same colour in dark and light modes, enter the same value in both fields.

Remove user-defined adaptive colours​

User-defined colours for dark mode override the automatic adaptive colour settings in the Simple adaptive colour mode. You can reset all user-defined dark-mode colours on a diagram page to their automatic defaults with a shortcut.

  1. Press Ctrl+Shift+6 to open the Adaptive Colors dialog.
  2. Deselect the Background or Labels colours if you want to keep their user-defined values.
  3. Click Remove User-defined to reset the adaptive colours.
Remove all user-defined adaptive colors if your diagram is not clear when working in dark mode

This ensures your diagram will have a uniform appearance for all shapes, connectors and labels in both dark and light modes.

Note: Adaptive colour and user-defined colours are saved per diagram page. To reset user-defined colours in a multi-page diagram, you will need to repeat this on every page of your multi-page diagram.

Share diagrams with adaptive colours​

The adaptive colour settings are saved in the diagram file. When you share your diagram file, a URL link with the diagram or HTML code with the diagram embedded, when it is reopened in the editor, the diagram will display with the adaptive colour settings it was saved with.

Adaptive colour settings​

Each page in a multi-page diagram has its own adaptive colour setting.

With nothing selected in your diagram page, click on the diagram Style tab. Change the Adaptive Colors setting. Alternatively, select Extras > Adaptive Colors from the menu.
Change the adaptive colours settings on a diagram in draw.io via the Extras menu or the Style tab in the format panel when nothing is selected

  • Automatic: Changes the intensity to enhance the contrast of all coloured elements in a diagram. This is set by default.
  • Simple: Improves the contrast of only the black and white elements, and retains all other colours. Thus the same palette can be used in dark and light modes.
  • None: Disables adaptive colours in dark mode completely. Diagrams will appear as they would in light mode even if you enable dark mode in the draw.io editor.
Change the adaptive colours settings on a diagram in draw.io via the Extras menu or the Style tab in the format panel when nothing is selected

Disable adaptive colours​

If you want to have the draw.io editor in dark mode to match your system or browser, but always want to see the diagram canvas and colours in light mode, turn off adaptive colours.

With nothing selected in your diagram, click on the diagram Style tab. Change the Adaptive Colors setting to None. Alternatively, select Extras > Adaptive Colors from the menu.
Change the adaptive colours settings on a diagram in draw.io via the Extras menu or the Style tab in the format panel when nothing is selected

Adaptive colour settings are applied to each diagram page and are saved within the diagram file - when someone opens the diagram, or edits a diagram from an exported URL or HTML file, they will see each diagram page in the editor with the adaptive colour settings you selected.

Note: In multi-page diagrams, you will need to change this setting on every diagram page.

Configure default adaptive colours​

Change the adaptive colours settings on a diagram in draw.io via the Extras menu or the Style tab in the format panel when nothing is selected

The default is automatic, but you can set simple or none as your custom default via the draw.io editor configuration. Select Extras > Configuration or ...> Settings > Configuration to open the configuration settings.

Enter either automatic, simple, or none as the value for defaultAdaptiveColors in the configuration, then click Apply

{
  "defaultAdaptiveColors": "simple"
}
Select one or more shapes and open the colour palette

Reload the browser tab to load your configuration with a different default. This will be shown in brackets on the Adaptive Colors setting in the diagram Style tab.
Select one or more shapes and open the colour palette