MusicPlayer/themes

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

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

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