Add a theme picker and an Original web theme (#42)

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>

themes/README.md

@@ -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 |

themes/main_theme.tres

@@ -1331,6 +1331,8 @@ TitleLarge/base_type = &"Label"
 TitleLarge/font_sizes/font_size = 50
 TitleMedium/base_type = &"Label"
 TitleMedium/font_sizes/font_size = 35
+TopBarBackground/base_type = &"PanelContainer"
+TopBarBackground/styles/panel = SubResource("StyleBoxFlat_wl3gy")
 TooltipLabel/colors/font_color = Color(0.875, 0.875, 0.875, 1)
 TooltipLabel/colors/font_outline_color = Color(0, 0, 0, 1)
 TooltipLabel/colors/font_shadow_color = Color(0, 0, 0, 0)