Switch between classic, simple and dark modes

draw.io 31 Oct 2022

Share:

With draw.io, you can switch editor themes via the menu - Default, Minimal, Sketch (whiteboard) and Atlas. There are also editor modes to switch between the classic mode - the default editor layout or theme you’ve selected via the menu - and the new simple mode. This toggle switch lets you swap between dark and light modes quickly.
Click on the sun/moon in the top right and enable or disable the simple whiteboard editor or the dark/light editor theme.

Note: If you are in light mode, the icon in the top right will be a sun. If you are in dark mode, it will be a moon.

Switch between modes in draw.io

  1. Click on the sun/moon icon in the top right.
    Click on the sun/moon in the top right and switch between the four classic editor themes, and the simple mode, as well as between dark and light modes
  2. Deselect Simple to switch to the new Simple mode. You don’t need to reload your browser tab. Click on it again to switch back to your previous editor theme.
  3. Click on Dark to switch to dark mode in whatever editor theme you are using. Click on “Light” to use light mode.

Tip: Automatic should reflect your operating system or browser settings automatically (when they are set to dark mode).


Dark mode works on all editor themes

When you switch into dark mode, the editor will automatically switch some colours of shapes and text so they are more readable.

Automatic will set the editor into dark or light mode depending on your operating system or browser dark/light settings

Tip: Many diagrams in the template diagram also work well in dark mode - click on the magnifying glass in the top right of a diagram in the template library to see a preview.


Introducing simple mode

With the new simple mode, we have redesigned toolbar and integrated the menu so the editor is sleeker and less distracting.
The draw.io simple mode has a simpler toolbar which integrates the menu

  • Click on ... (three dots) at the right end of the toolbar to open the settings and import/export menu.

  • Hide or display the format panel via Format at the right end of the toolbar next to the mode switch.

  • Hide or display the shapes, layers, tags panel and other tools via View at the left end of the toolbar.

  • Use the tools in the middle to add shapes, text, freehand drawings and tables, as you would from the normal toolbar.

  • Click on the + in the middle to insert specific shapes, images, templates, or use the advanced text-to-diagram tools.
    Click on the + to insert specific shapes, images, templates, and more via the toolbar in draw.io in simple mode

Tip: Hover over any of the tools or text to see a tooltip.

Simplify the drawing canvas

  1. Make sure nothing is selected in your diagram so you can see the Diagram tab in the format panel on the right.
  2. Disable the Grid and Page View checkboxes.

Follow us on GitHub, Twitter, Facebook.

Share: