# Themes

The whole look of the game comes from one theme, `main_theme.tres`. It is the project
theme (Project Settings → GUI → Theme → Custom), so every scene uses it without setting
anything. Scenes and scripts never set colours, font sizes or style boxes themselves;
they name one of the theme's styles instead, and `tests/integration/test_theme.gd`
checks that it stays that way.

## Making a new theme

1. Copy `main_theme.tres`, e.g. to `dark_blue_theme.tres`.
2. Open the copy in Godot (double-click it) and change its colours, style boxes and font
   sizes in the theme editor. Keep every style's name.
3. Point Project Settings → GUI → Theme → Custom at the copy.

The **font** is the theme's default font, Godot's own Open Sans with Noto Sans JP for
Japanese text; see `fonts/README.md`.

Icons (play, restart, add player, the slider and switch knobs) are not part of the theme;
they come from the image files in `icons/` and Godot's built-in theme.

## What is in the theme

**Godot's default look** for every kind of control the game uses (Button, Label, Panel,
CheckButton, sliders, scroll bars, text fields and so on), copied in so it can be changed
here.

**Named styles** (theme type variations), picked with *Theme Type Variation* in a node's
inspector or `theme_type_variation` in code:

| Style | Based on | Used for |
|---|---|---|
| `WindowBackground` | Panel | The background behind everything in the main window |
| `PopupBackground` | Panel | The panel of every popup: dark, bordered and rounded |
| `DarkSpacer` | Panel | The dark gaps in the player list and the add player row |
| `CharacterCard` | Panel | A character in the character select popup |
| `MusicList` | PanelContainer | The list of songs in the quiz |
| `SongRow` | PanelContainer | One song in that list |
| `ShortcutRowDark` | PanelContainer | Every other row in the shortcuts popup |
| `ListRowEven`, `ListRowOdd` | PanelContainer | Alternating rows in the inspiration and sync lists |
| `TitleLarge` | Label | The soundtrack that is playing (50) |
| `TitleMedium` | Label | The song that is playing, and the winner (35) |
| `Title` | Label | The window title and popup titles (25) |
| `TextLarge` | Label | Log rows, shortcuts and the inspiration list (20) |
| `TextMedium` | Label | Rows in the sync result (18) |
| `HighlightLarge`, `HighlightMedium` | Label | Orange text: sync headers and every other sync row |
| `SongRowLabel`, `SongRowLabelPlaying` | Label | A song's text, and the one that is playing |
| `TabButton` | Button | The Quiz and Statistics tabs; the chosen one is orange |
| `StatisticsCard`, `StatisticsCardHover` | PanelContainer | A soundtrack card in the statistics, and the one under the mouse |
| `StatisticsGrid` | GridContainer | The grid of soundtrack cards, with the space between them |

**Palette**: colours used from code.

| Colour | Used for |
|---|---|
| `backdrop` | The dimming behind an open popup |

**ScoreGraph**: the graph of the game on the Winner popup, drawn from code.

| Item | Used for |
|---|---|
| `player_1` … `player_7` | Each player's line, dots, score and legend square, by their place in the player list |
| `grid`, `axis_text` | The gridlines and the numbers along the axes |
| `winning_line` | The dashed line at the winning score |
| `line_width`, `dot_radius` | How thick the lines are and how big the dots |
| `font_size` | The axis numbers and the scores at the end of the lines |