Appearance: Light, Dark, System

Appearance is how the editor itself looks, just for you. It is the small sun / moon / monitor button on the right edge of the tab bar, and clicking it walks through three settings in turn: Light, Dark, then System. The glyph shows where you are, and the tooltip tells you where the next click takes you.

The three settings

• Light. The editor's chrome stays light, whatever your device is set to.
• Dark. The editor's chrome stays dark, whatever your device is set to.
• System. The editor follows your operating system, so a machine that turns dark at sunset takes the editor with it, live, without a reload.

System is where everyone starts. Open livediagram on a machine set to dark and the editor is dark from the first paint, canvas included. Pick Light or Dark yourself and that choice outranks your device from then on, in both directions — a light editor on a dark machine is perfectly allowed.

Appearance is yours; a colour scheme is the diagram's

The distinction worth holding on to is who each setting belongs to.

Appearance belongs to you and this browser. It recolours the editor's interface — the tab bar, header, panels, and the backdrop around your work — and it is never saved into the diagram, so nobody you share with is affected by it.

A colour scheme belongs to the diagram. It sets the canvas backdrop and the colours of your elements, it is stored on the tab, and everyone who opens that tab sees it.

So a light, pastel diagram can sit in a dark editor late at night, and a dark architecture diagram can sit in a light one, whichever is comfortable.

The one that follows you: Default

The Default colour scheme is the exception, deliberately. It is the scheme every new tab starts on, and it has a light half and a dark half: your appearance decides which one you see. Work in Dark and its canvas is charcoal with grey elements; switch to Light and the same tab is white with the familiar blue ones.

Nothing is written to the diagram when you switch — the tab is not edited, and there is nothing to save. A colleague reading the same tab in light chrome sees the light half at the same moment you are looking at the dark one.

Every other colour scheme is a decision somebody made and stored, so it looks the same for everyone, in either appearance.

The match nudge

Because the two are independent, they can end up mismatched: a dark-backdrop diagram in a light editor, or the reverse. When that happens, a small dismissible prompt appears above the tab bar offering to switch the editor to match in one click. It works out "light" or "dark" from the scheme's background brightness, so it is right for built-in and custom colour schemes alike. Dismiss it and it stays gone for that pairing, but it can still offer again on a differently styled tab. The colour-scheme picker offers the same one-click switch inline.

Tabs on the Default scheme never trigger it. They already match — that is the point of them.

Your choice sticks

• Remembered. Your pick is saved in your browser, so a refresh, or your next visit, keeps the appearance you chose.
• No flash. It is worked out before the page first paints — your saved pick, or your device setting if you have not made one — on every screen including the welcome and new-diagram flows, so you never see a flash of the wrong one.