How to switch between the light and dark themes

This guide shows how to change Ori's colour theme. It assumes Ori is open in your browser (see the getting started tutorial).

Steps

Look at the right of the header, next to ⊞ Workspace: the ☾ button switches to the dark theme; once dark, it becomes ☀ and switches back to light.
Click it. The whole page follows — conversation, workspace panel, code previews and editor (Monaco switches between its light and vs-dark palettes).

Variants

Light is the default. Ori no longer follows the operating system's light/dark preference: the theme is whatever was chosen last in this browser.
The choice is remembered per browser (localStorage key ori.theme, values light or dark) and applied before the first paint on the next load. Clearing the site data restores light.
The terminal tab keeps a dark background in both themes, like an IDE's integrated terminal.
Several browsers connected to the same Ori server each keep their own theme: it is a browser preference, not part of the shared session.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# How to switch between the light and dark themes

This guide shows how to change Ori's colour theme. It assumes Ori is open in your browser (see the [getting started tutorial](../tutorials/getting-started.md)).

## Steps

1. Look at the right of the header, next to **⊞ Workspace**: the **☾** button switches to the dark theme; once dark, it becomes **☀** and switches back to light.
2. Click it. The whole page follows — conversation, workspace panel, code previews and editor (Monaco switches between its `light` and `vs-dark` palettes).

## Variants

- Light is the default. Ori no longer follows the operating system's light/dark preference: the theme is whatever was chosen last in this browser.
- The choice is remembered per browser (localStorage key `ori.theme`, values `light` or `dark`) and applied before the first paint on the next load. Clearing the site data restores light.
- The terminal tab keeps a dark background in both themes, like an IDE's integrated terminal.
- Several browsers connected to the same Ori server each keep their own theme: it is a browser preference, not part of the shared session.

## See also

- Why the theme is browser state and not server state: [explanation: architecture](../explanation/architecture.md)
- The other workspace conveniences: [How to use the workspace panel](use-the-workspace.md)