Files
MusicPlayer/themes/README.md
T
Sansan 4a934840f6
Build / test (push) Successful in 1m11s
Build / build (push) Successful in 1m20s
Restyle the music player bar
The bar is rounded and a little taller, with a round orange play button
and a restart button that lights up orange under the mouse. The icons sit
inside their buttons with room around them, and are one colour, cropped to
their shape. Progress fills in orange, the volume slider gets a speaker
icon, and the buttons say their shortcut keys in their tooltips.

Buttons grow a little under the mouse and shrink while held down, and the
play button pops when it switches between play and pause. ButtonBounce
holds these animations so other buttons can use them too.
2026-10-09 17:38:38 +02:00

4.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, 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
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