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

# Sounds and launcher colors

> Sounds, host screen colors, achievement notices and window buttons.

## Sounds

Many of them play without you doing anything:

| Sound | When |
| - | - |
| `move` | moving focus with `createFocus` (not when the mouse passes over) |
| `select` | pressing `accept` with `bindNav` |
| `launch` / `error` | launching a game with `ejg.game.launch()` / if it fails |
| `open` | opening a launcher screen with `ejg.ui.open()` |

The rest you play yourself with **`ejg.sound.play(name)`**. In the example, `"open"`
when the game page opens and `"back"` when it closes (when your theme handles
`back`, ejGames does not play a sound on its own).

Which sounds you hear is decided by `sounds` in `theme.json`:

```json theme={null}
"sounds": { "preset": "soft" }
```

The built-in sound sets are `soft`, `ps`, `xbox`, `switch`, `retro` and `none`.
You can also use **your own files** (wav, ogg or mp3, with paths relative to the
theme folder). Any you leave out are taken from the `preset`:

```json theme={null}
"sounds": { "preset": "soft", "move": "sounds/move.wav", "select": "sounds/select.wav" }
```

The keys are `move`, `select`, `back`, `launch`, `error` and `open`. The user has
the last word: if they pick another sound set in **Appearance → Navigation sounds**
(or "No sounds"), that one is used, not your files. Volume is a per-profile
setting (**Settings → Profile**).

## Colors of the launcher screens

The ejGames screens that open on top of your theme (settings, search, the editor…)
can wear your colors with **`host`**:

```json theme={null}
"host": { "accent": "#7c5cff", "surface": "#161922", "radius": "10px", "dark": true }
```

| Key | What it changes |
| - | - |
| `accent` | accent color (buttons, switches, focus). Without it, the profile's color. Text on the accent is white: pick a color with contrast. |
| `surface` | panel background |
| `text` | text color |
| `radius` | corner radius (`"10px"`) |
| `font` | typeface (`"Consolas, monospace"`) |
| `dark` | `false` for light screens |

And for the gallery:

* **`palette`**: four colors **in this order: background, surface, accent and
  text**. If there is no preview image, the gallery draws a sketch with them.
* **`preview`**: an image of your theme (`"preview": "preview.jpg"`), in the
  theme folder. The card is 16:10.

Moneda, the house theme, uses warm carbon and one color. Its palette is
`#141315`, `#1C1B1E`, `#FF3A2D`, `#F5F2EE`.

## Achievement notices inside the game

While you play, achievements appear in a layer over the game. Your theme picks
the look with **`overlay`**:

```json theme={null}
"overlay": { "style": "xbox" }
```

The styles are `steam`, `playstation`, `xbox`, `switch`, `cinema`, `retro`,
`ejgames` and `moneda`. Each one appears where its platform puts it (Xbox at the
bottom center, PlayStation at the top right…) and with its sound. `ejgames` is
the quiet one: it uses your `host` colors (accent, background, text, radius and
typeface), and it is what is used if you set nothing. `moneda` is the house
theme's notice. If your theme has an `accent` setting (or `dark`, or `palette`
on the `retro` style), the notice respects it. The user can change the style and
the position in **Settings → Overlay**.

## Window buttons

With **`"windowControls": "host"`** (what the example uses) ejGames draws
minimize, maximize and close in the top-right corner, visible when the mouse
passes over. If you prefer to draw them yourself, set `"theme"` and use
**`ejg.window.minimize()`**, **`ejg.window.maximize()`** (it toggles) and
**`ejg.window.close()`**. To drag the window, `data-ejg-drag` as in
[step 3](https://ej3mplo.mintlify.site/guia/primer-main.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.