Files
LlamaCasty/Themes/index.md
T
gramps 2273d20160 TASK 58: the properties panel wears the theme (no more light-system chrome)
The creator asked why the Stream Alerts "Display" drop-down was not in the same
style as the other drop-downs. It was never given the theme's YtComboBox style -
only a hand-painted Background/Foreground. Setting colours changes the paint, not
the template, so WPF still drew the light system ComboBox (grey border, system
arrow, white popup list) on top of the dark panel. The chat Font drop-down was a
copy of the same mistake, and every check box was the light system one.

The sweep of the whole properties panel (then the app):
  - ComboBox x2 (chat Font, alert Display) -> YtComboBox, hand-painted colours gone
  - TextBox x16 in the properties panel -> YtTextBoxCompact (new, BasedOn YtTextBox:
    11px / padding 4,2 - the panel is dense, the full 13px box would double it)
  - CheckBox x2 (chat) + x3 (preview broadcast) + x1 (socials dialog) -> YtCheckBox
    (new: a 14x14 rounded box + tick path, accent fill when checked)
  - the layer-rename field -> YtTextBoxCompact via BasedOn, still borderless
  - buttons, pills, sliders: already themed, untouched

The sweep also killed a typo'd foreground (#e0d0e0 for #e0e0e0) and the only
remaining hand-painted colour is the deliberate dimming of the two read-only path
fields.

Guard: ytLive.Tests/PropertiesStyleTests.cs (the ONE Good Dog test) parses the app
XAML and fails if an unstyled drop-down, check box or properties field comes back.
431/431 green, 0 warnings.
2026-10-21 19:46:25 -07:00

32 lines
1.8 KiB
Markdown

# Themes — index
The single source of the dark UI theme. See [`schema.md`](../schema.md) for the
memory-map conventions.
| File | Purpose |
|------|---------|
| `Controls.xaml` | All custom control styles/templates: `YtButton`, `YtButtonSecondary`, `IconButton`, `YtTextBox`, `YtTextBoxCompact` (the dense variant the properties panel uses), `YtComboBox`, `YtCheckBox`, scrollbar/slider/tooltip/context-menu/menu-item/separator/list-item (implicit where app-wide), `YtListBoxItem`, `YtLabel`, `SectionHeader` |
How it's wired:
- Merged once in [`App.xaml`](../App.xaml) — app-wide. New windows get the theme
automatically; **do not re-merge per-window**.
- Palette: window `#1a1a2e`, fields `#0f3460`, borders `#2a3a5e`, popups
`#16213e`, accent `#e94560`, hover `#26ffffff`, text `#e0e0e0`.
Gotchas learned the hard way:
- `MenuItemRole` has **no `Separator` value** — separators are standalone
`Separator` controls with their own implicit style.
- A custom `ComboBox` template must put the `ContentPresenter` (`SelectionBoxItem`)
**inside the ComboBox template, not the ToggleButton template** — the latter
resolves against the wrong TemplatedParent and renders nothing.
- **A control with no style renders with the LIGHT WPF system template** — a
hand-painted `Background`/`Foreground` colours the box but leaves the system
border, the system arrow and the white popup list. That is why the Stream
Alerts "Display" drop-down looked like it belonged to another app (TASK 58,
2026-10-21). **Rule: every control carries a theme style** — `YtComboBox`,
`YtCheckBox`, `YtTextBox`/`YtTextBoxCompact` — and paints no colour of its
own. `ytLive.Tests/PropertiesStyleTests.cs` fails if that drifts back.
Related: [`Helpers/index.md`](../Helpers/index.md) (custom controls the theme
styles), the XAML files at repo root that consume these styles.