Files
MusicPlayer/themes/README.md
T
Sansan e1e05f3904
Build / test (push) Successful in 38s
Build / build (push) Successful in 1m12s
Show a graph of the game on the Winner popup
The Winner popup now shows every player's score after each song as a
step line, with the winning score marked, and three facts under it: the
longest streak, the longest standstill and the song most players scored
on. The data comes from the points each song already records, through
the new ScoreHistory. The popup grows to 1600x920 with the graph across
the full width, so a 60-song game with five players stays readable.

Reset points now starts a new game: it clears the points on the songs
and the graph starts after the song that was playing. Songs already on
the server at startup count as an earlier game.

The screenshot tour has a long five-player game, and only the Winner
popup differs from before.
2026-10-07 10:40:46 +02:00

3.4 KiB

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