Switch between editor themes and light/dark modes

draw.io 31 Oct 2022

Share:

With draw.io, you can switch editor themes via the menu - Classic, Simple, Minimal, Sketch (whiteboard) and Atlas. There are also editor modes to switch between dark and light modes.
Change the editor theme via the draw.io menu - Extras > Theme if you are using the classic editor theme

Switch between editor themes and dark/light modes in draw.io

Open the draw.io menu:

  • In the Simple theme, click on the three dots in the toolbar to open the draw.io menu. * In the Sketch theme, click on the three horizontal lines in the top left.
  • In the Minimal theme, click on Diagram in the toolbar.
  • In Atlas and Classic themes, look under the Extras menu.

Change editor theme: Select Settings > Theme to change your editor theme. You can switch between Simple and Classic without needing to reload the browser tab. If you choose Minimal, Sketch or Atlas, you will need to reload the browser tab.
Change the editor theme via the draw.io menu - Settings > Theme

Switch to dark or light mode: Select Settings > Appearance and then Light or Dark to change between dark and light modes.
Switch between dark and light modes via the draw.io menu under Settings > Appearance

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 the Simple editor theme

With the new Simple editor theme, 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: