Files
MusicPlayer/themes
Sansan b510aa47f2
Build / test (push) Successful in 44s
Build / build (push) Successful in 1m13s
Split settings into a quiz card and an application Settings popup
- A Quiz settings button under the player bar opens a small card above
  it with the quiz settings, including Auto repeat, which moves there
  from under the player bar. The card does not dim the quiz, so it can
  be changed during a song, and grows to fit its rows.
- A Settings button in the top bar opens the application settings:
  server, fullscreen and songs to download ahead. Quick sync is gone,
  as the server no longer has it, and the server list is in Settings.
- Labels use sentence case, and seconds to hide show as whole numbers.
- Debug builds switch to the local server and a low winning score in
  the Settings autoload, before any scene asks the server for anything.
  The DEBUG label moves to the top bar, so it shows on every tab.
- Search moves from the top bar back to the quiz toolbar, as the
  Statistics tab has its own search.
2026-10-07 16:05:13 +02:00
..

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