# Themes

The whole look of the game comes from a theme. 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.

| Theme | File | |
|---|---|---|
| Classic | `main_theme.tres` | The default. Also the project theme (Project Settings → GUI → Theme → Custom), which the editor shows |
| Original web | `original_web_theme.tres` | Looks like MusicFrontend, the web version: orange-bordered buttons, `#333` header and popups, `#424242` panels, `#4e4e4e` alternating rows, a yellow playing song and a light grey player bar |
| Nord | `nord_theme.tres` | Dark blues from the app icon (`#1e4a69` window, `#1a3e5a` panels, `#29577f` buttons) with Nord's Snow Storm text, Frost and Aurora accents: Aurora yellow `#EBCB8B` for the playing song and highlights. Round shapes: pill buttons and tabs, 14–16 px corners, soft shadows on popups, cards and the player bar, and rounded text fields |
| Christmas | `christmas_theme.tres` | Santa and a Christmas tree: Christmas red (`#7a1520` window, `#5c0f18` panels) with snow white buttons and red text, a thick white "fur" trim on popups, cards, the lists and the player bar, the tree's green (`#1f6b3c`) for the chosen tab and the play button, and gold for the playing song and highlights. The same round shapes as Nord |

## Picking a theme

The themes are listed in `Settings.THEMES` (`data/settings.gd`): an id, the name shown
and the file. The player picks one in Settings → Theme, and it applies at once.
`Settings.apply_theme()` sets the theme of the root window, which every control without a
theme of its own uses, and saves the id as `theme_id` in `settings.cfg`. The saved theme
is applied when the game starts.

Code that reads theme colours itself redraws on `NOTIFICATION_THEME_CHANGED`, e.g. the
score graph and the popup backdrop. `Settings.theme_changed` is emitted after a switch.

To see the pictures of the screenshot tour in another theme, pass its id:
`godot --path . -s tools/take_screenshots.gd -- <dir> original_web`.

## 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. Add it to `Settings.THEMES`. `test_theme.gd` checks that it has every style, colour and
   size that `main_theme.tres` has.

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 |
| `TopBarBackground` | PanelContainer | The bar along the top of the window |
| `PlayerList` | PanelContainer | The player list, with space around its rows |
| `PlayerScore` | Label | A player's points (24) |
| `PlayerCharacter`, `PlayerCharacterHover` | PanelContainer | The frame around a player's character, and the one under the mouse |
| `StepButton` | Button | The small +1 and -1 buttons, with less padding than other buttons |
| `CharacterCard` | Panel | A character in the character select popup |
| `MusicList` | PanelContainer | The list of songs in the quiz |
| `SongRow`, `SongRowOdd` | PanelContainer | Alternating songs in that list |
| `SongRowHover`, `SongRowPlaying` | PanelContainer | The song under the mouse, and the one that is playing |
| `SongRowPictureLines`, `SongRowPictureLine` | VBoxContainer, HBoxContainer | The space between the lines of player pictures on a song, and between the pictures |
| `ShortcutRowDark` | PanelContainer | Every other row in the shortcuts popup |
| `ListRowEven`, `ListRowOdd` | PanelContainer | Alternating rows in the inspiration, sync and statistics song lists |
| `ListRowHover` | PanelContainer | A row in the statistics song list under the mouse |
| `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 |
| `PlayerBar` | PanelContainer | The music player's rounded bar |
| `PlayerButtonPrimary`, `PlayerButton` | Button | The round play button, and the restart button; the icon's colour on hover comes from here |
| `ProgressSlider`, `VolumeBar` | HSlider | How far the song has played (orange), and the volume |
| `PlayerTime` | Label | The time played and the song's length |
| `PlayerIcon` | Button | The volume icon in the music player: a flat button that only shows its icon, in the theme's colour |
| `SongStatsHeader` | PanelContainer | The column titles above the statistics song list, spaced like its rows |
| `SongStatsText`, `SongStatsSecondary` | RichTextLabel | A song's name and its soundtrack (dimmer) in the statistics song list |

**Palette**: colours used from code.

| Colour | Used for |
|---|---|
| `backdrop` | The dimming behind an open popup |
| `first_point` | The flash over a player's row on their first point (see `common/anim.gd`) |
| `match_point` | The glow over a player's row while they are one point from winning |
| `flash` | The flash over a song's row when it starts playing or is answered |

**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 |