# The MSN look

- a Luna-blue title bar and a File/Edit/Actions/Tools/Help menu bar
- XP scrollbars
- a big glossy toolbar
- display pictures
- font colors
- the classic message, nudge and sign-in sounds

Claude's display picture is its spark logo. Pick the Claude Code mascot under **Display picture** in **Edit contact...** if you prefer it.

## Themes

Not in the mood for 2005? **Tools > Look > Professional** draws the same windows flat and quiet: see [The professional look](professional-look.md).

**Tools > Theme**, in the contact list or a conversation, has Luna's blue three ways:

- **Light** is Luna as it always was, and what the app starts with.
- **Dark** is Luna at night: the title bar keeps its blue, and the panes, bars, dialogs and scrollbars under it go navy. It matches the Terminal tab, which was dark already.
- **Match system** follows your computer's appearance, and changes with it.

And XP's other colour schemes, each by day and at night:

- **Olive Green** and **Olive Green Dark**: an olive title bar over khaki, and dark olive at night.
- **Silver** and **Silver Dark**: a pale silver title bar with dark writing, and graphite at night.
- **Royale** and **Royale Noir**: Media Center's deeper blue by day, and black at night.
- **Pink** and **Pink Dark**: a pink title bar over blush, and plum at night.

Every open window changes at once, and the choice is kept. In the [professional look](professional-look.md) a palette tints the slate and ink, and gives its colour to what is selected and Send. The colour you write in was picked to be read on white, so at night it is shown lighter: black as near-white, navy as a pale blue. A web page in the [Browser tab](browser-tab.md) is shown in the same colour scheme as the app, as a browser would show it.

### Adding to a stylesheet

A colour that should change at night is written as the default of a role, and `src/renderer/styles/theme.css` gives the role its night colour:

```css
.me-name {
  color: var(--text-strong, #10244a); /* by day; --text-strong is set for the night only */
}
```

- **By day** the colour is the one written there. Nothing in `theme.css` has to change for it.
- **At night** every role is set in the one `@media (prefers-color-scheme: dark)` block of `theme.css`. The app shows its windows in the colour scheme of the theme (`nativeTheme.themeSource`), so no window runs code for it. The browser preview switches that rule on and off instead, in `preview/bridge.js`.
- **A colour that stays** is written plainly: white text on a blue selection, the title bar, a picture's own background.

`test/theme.test.js` fails for a role without a night colour, and for a night colour nothing uses.

### The palettes

Olive Green, Silver, Royale and Pink are Luna's own colours turned to their hue: `scripts/build-palettes.js` reads `theme.css`, `pro-theme.css` and the role defaults of the stylesheets, and writes `src/renderer/styles/palettes.css`. Each window is marked with the palette of its theme (`data-palette`, see `src/renderer/lib/look.js`), and the palette gives the roles its colours, by day and at night. Only blues turn: greys, the XP beige, and the colours that say what something is (a link, a status, a plan's violet) stay.

- **A new colour** in `theme.css` or a stylesheet needs nothing by hand: run `node scripts/build-palettes.js` and commit what it writes. `test/theme.test.js` fails while `palettes.css` is not what the script makes.
- **A colour that stays** but is the window's blue, such as the title bar, is a token by day in `theme.css` (`--titlebar-bg`), so that a palette can turn it.
- **A palette's own colours**, such as Silver's dark title text, are picked by hand in `PALETTES` at the top of the script.