Switch between classic, modern and dark modes

diagrams.net 31 Oct 2022

Share:

With diagrams.net, 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 the theme you’ve selected via the menu - and the new modern 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 diagrams.net

  1. Click on the sun/moon icon in the top right.
    Click on the sun/moon in the top right and switch between classic mode (and the editor themes) and the modern mode, as well as between dark andlight modes
  2. Deselect Classic to switch to the new Modern 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 it again to return to 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 will also work in dark mode - click on the magnifying glass in the top right of a diagram in the template library to see how it looks in dark mode.


Introducing modern mode

With the new modern mode, we have redesigned toolbar and integrated the menu so the editor is sleeker and less distracting.
The diagrams.net modern 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 diagrams.net in modern 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: