> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gcaplabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance & Themes

> Control how Headmaster looks — theme, font size, accent color, density, and custom CSS.

# Appearance & Themes

**Path:** My Headmaster → Look

The Look tab controls the visual appearance of Headmaster: theme, font size, accent color, density, and custom CSS.

***

## Themes

| Theme             | Description                                                             |
| ----------------- | ----------------------------------------------------------------------- |
| **Light**         | Clean white background, dark text. For daytime use.                     |
| **Dark**          | Dark background, light text. For nighttime and low-light use.           |
| **Follow System** | Automatically switches between Light and Dark based on your OS setting. |
| **High Contrast** | Maximum contrast for accessibility. Black and white.                    |

Pick a theme from the dropdown. The change applies instantly — no restart needed.

***

## Font size

Adjust the font size with:

* The **font size slider** in Settings → Look.
* Keyboard shortcuts: `Cmd/Ctrl + =` to increase, `Cmd/Ctrl + -` to decrease, `Cmd/Ctrl + 0` to reset.

The font size applies everywhere in the app — chat, sidebar, and settings. The file preview panel and code editor have their own independent font size controls.

***

## Accent color

The accent color is used for buttons, links, active states, and the primary action color. Pick from the preset colors or enter a custom hex value.

The accent color applies instantly and does not affect the theme — you can have a dark theme with any accent color.

***

## Density

| Setting                   | Description                                                             |
| ------------------------- | ----------------------------------------------------------------------- |
| **Comfortable** (default) | Standard spacing, easy to read.                                         |
| **Compact**               | Tighter spacing, more content visible at once. Useful on small screens. |

***

## Language

Headmaster's interface language. Currently supports:

* **English** (default)
* **Arabic** (reserved for a future release)

<Note>
  The language setting only affects the UI language — not what language the agent responds in. The agent responds in whatever language you write to it in.
</Note>

***

## Custom CSS themes

For advanced users, Headmaster supports custom CSS themes:

<Steps>
  <Step title="Open Custom theme">
    Go to **Settings → My Headmaster → Look → Custom theme** and click **Create custom theme**.
  </Step>

  <Step title="Write your CSS">
    Override Headmaster's design tokens. The editor has a live preview — you see changes as you type.

    ```css theme={null}
    :root {
      --bg: #1a1a1a;
      --text: #f0f0f0;
      --border: #333;
      --border-strong: #444;
      --bg-elevated: #222;
      --text-muted: #888;
      --primary: #6366f1;
      --primary-hover: #4f46e5;
    }
    ```
  </Step>

  <Step title="Save and apply">
    The custom theme is stored as a `.css` file in your data directory.
  </Step>
</Steps>

### Sharing themes

Custom themes can be exported as `.css` files and shared. To import a theme: **Settings → My Headmaster → Look → Custom theme → Import** → select a `.css` file. The theme appears in the theme list.

***

<CardGroup cols={2}>
  <Card title="Keyboard Shortcuts" icon="keyboard" href="/keyboard-shortcuts">
    Shortcuts for theme, font size, and all other actions.
  </Card>

  <Card title="Settings Overview" icon="gear" href="/settings-overview">
    Full map of all settings areas.
  </Card>
</CardGroup>