Dark mode for the editor

What it is

Dark mode is an app-wide theme for the editor: sidebar, top bar, text editor, diagram canvas, chat, dialogs and the /settings page. It is not a second set of hand-painted colours. Every colour in the app is a variable with a light default, and dark mode defines the same variables with values derived from the Midnight export style’s hue-aware transform, plus a short list of hand-tuned exceptions. That is why a dark editor and a Midnight export look like the same product.

How it works

Click your avatar at the top right and choose “Dark mode”; the same item reads “Light mode” when dark is on. Runic sets the dark variables on the page root, marks it with data-mode=“dark” and tells the browser the colour scheme is dark, so native controls follow. The text editor switches to its night theme at the same time: the ground is a deep navy, the syntax tints are lifted so commands, captions and notes stay distinguishable, and tooltips or other surfaces that were navy in light mode keep their light text.

The accent stays the same saturated violet so buttons keep their contrast; the page behind the diagram, the panels and the editor ground each get their own navy. The setting is read when the app loads, so a reload comes back in the theme you left.

Where it applies

Everywhere the editor is mounted — the signed-in app, the guest “Try it” editor and the /learn tour, which all read the same browser preference — plus the /settings page and the connector-authorization page you see when a Claude client links to Runic. The landing page, /features, /docs and /login stay light, and leaving the editor, /settings or the authorization page restores the light variables so a marketing page you open next never inherits the dark ones. Share links and embeds have their own chrome and do not read the preference. Image exports are unaffected: pick the Midnight style in the Export menu for a dark picture.

Persistence and limits

The choice is stored as theme: dark or light in Runic’s preference store in your browser, which only exists once you have allowed Preferences in the cookie dialog; without that consent the switch works for the session and is forgotten on reload. An older editor-only night setting is read as dark. Runic does not follow the operating system’s dark-mode setting; the switch is the only input. It is per browser, not per account.

How to use it

1. 1
   Open the account menu

   Click the avatar at the top right of the editor. The menu lists Settings, Teams, Learn, Docs, Dark mode, Feedback and Sign out.
2. 2
   Choose Dark mode

   The editor switches at once; the menu item now reads “Light mode”.
3. 3
   Allow Preferences if you want it kept

   Allow the Preferences category in the cookie dialog, or later under Settings → Cookies. Without it the theme resets on reload.
4. 4
   Switch back

   Same menu, “Light mode”. Both states are applied immediately, nothing reloads.

Commands & shortcuts

Tips

• Dark mode changes the screen only. A PNG you export while in dark mode still uses the export style you picked, Runic by default.
• If the theme keeps resetting on reload, check the cookie dialog: the Preferences category has to be allowed for any editor preference to persist.
• The theme is a browser setting, so a second device starts light until you switch it there too.

Questions