Add a theme picker and an Original web theme (#42)
Build / test (push) Successful in 1m31s
Build / build (push) Successful in 1m13s

Settings has a Theme row listing Settings.THEMES: Classic (main_theme.tres,
still the default) and Original web (original_web_theme.tres), which looks like
MusicFrontend: orange-bordered buttons, a #333 header and popups, #424242
panels, #4e4e4e alternating rows, a yellow playing song and a light grey
player bar. Picking one sets the root window's theme at once and saves it as
theme_id in settings.cfg, and it is applied at start.

The popup backdrop and score graph follow a theme switch. The top bar has its
own TopBarBackground style. test_theme.gd checks that every theme has
everything main_theme.tres has. The screenshot tool takes a theme id.

Closes #42

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
SansanandClaude Opus 5.5 committed 2026-10-12 20:50:12 +02:00
1 parent 70e970b24c
commit 94e8dfb602
15 files changed
+2497 -586

No files matched your search

+29 -7
View File
@@ -1,17 +1,35 @@
# 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.
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 |
## 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. Point Project Settings → GUI → Theme → Custom at the copy.
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`.
@@ -32,7 +50,11 @@ inspector or `theme_type_variation` in code:
|---|---|---|
| `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 |
| `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 |