feat(theme): darker text + buttons in light themes (revert modal backing)

Replace the light-theme modal backing (19e3138, now reverted) with a root-cause
fix: darken the light themes' UI elements for contrast.
- Buttons: the light-theme ImGuiCol_Button overlays were barely-there grey
  (5/8/12% black); bump to 13/20/28% so buttons read as buttons on light
  surfaces (one edit in ApplyColorThemeToImGui covers all light skins).
- Text: raise --on-surface-medium (60-72% -> 86%) and --on-surface-disabled
  (38-40% -> 52%) across the light skins (light, color-pop-light, dune, marble,
  iridescent) — the dominant secondary/label text was too faint. Base
  --on-surface was already near-black, left as-is.
The active theme is TOML-skin-driven, so the code GetMaterialLightTheme() is not
the live source; edits are in the skin TOMLs + the ImGui-style mapping.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-04 16:57:38 -05:00
parent 19e31388d9
commit bb2337b552
7 changed files with 14 additions and 29 deletions

View File

@@ -19,8 +19,8 @@ images = { background_image = "backgrounds/texture/pop-light_bg.png", logo = "lo
--on-secondary = "#FFFFFF" --on-secondary = "#FFFFFF"
--on-background = "#1E1E2A" --on-background = "#1E1E2A"
--on-surface = "#1E1E2A" --on-surface = "#1E1E2A"
--on-surface-medium = "rgba(30,30,42,0.72)" --on-surface-medium = "rgba(30,30,42,0.86)"
--on-surface-disabled = "rgba(30,30,42,0.38)" --on-surface-disabled = "rgba(30,30,42,0.52)"
--error = "#E0304A" --error = "#E0304A"
--on-error = "#FFFFFF" --on-error = "#FFFFFF"
--success = "#18A860" --success = "#18A860"

View File

@@ -20,8 +20,8 @@ elevation = { --elevation-0 = "#FDF8F0", --elevation-1 = "#F5EDE0", --elevation-
--on-secondary = "#FFFFFF" --on-secondary = "#FFFFFF"
--on-background = "#3A2E22" --on-background = "#3A2E22"
--on-surface = "#3A2E22" --on-surface = "#3A2E22"
--on-surface-medium = "rgba(58,46,34,0.68)" --on-surface-medium = "rgba(58,46,34,0.86)"
--on-surface-disabled = "rgba(58,46,34,0.38)" --on-surface-disabled = "rgba(58,46,34,0.52)"
--error = "#A0524A" --error = "#A0524A"
--on-error = "#FFFFFF" --on-error = "#FFFFFF"
--success = "#6A8A5C" --success = "#6A8A5C"

View File

@@ -20,8 +20,8 @@ elevation = { --elevation-0 = "#FDFBFF", --elevation-1 = "#F5F0FA", --elevation-
--on-secondary = "#FFFFFF" --on-secondary = "#FFFFFF"
--on-background = "#1C1525" --on-background = "#1C1525"
--on-surface = "#1C1525" --on-surface = "#1C1525"
--on-surface-medium = "rgba(28,21,37,0.72)" --on-surface-medium = "rgba(28,21,37,0.86)"
--on-surface-disabled = "rgba(28,21,37,0.40)" --on-surface-disabled = "rgba(28,21,37,0.52)"
--error = "#C62828" --error = "#C62828"
--on-error = "#FFFFFF" --on-error = "#FFFFFF"
--success = "#2E7D32" --success = "#2E7D32"

View File

@@ -19,8 +19,8 @@ elevation = { --elevation-0 = "#FAFAFA", --elevation-1 = "#F2F3F5", --elevation-
--on-secondary = "#FFFFFF" --on-secondary = "#FFFFFF"
--on-background = "#2A2C30" --on-background = "#2A2C30"
--on-surface = "#2A2C30" --on-surface = "#2A2C30"
--on-surface-medium = "rgba(42,44,48,0.68)" --on-surface-medium = "rgba(42,44,48,0.86)"
--on-surface-disabled = "rgba(42,44,48,0.38)" --on-surface-disabled = "rgba(42,44,48,0.52)"
--error = "#8C5A62" --error = "#8C5A62"
--on-error = "#FFFFFF" --on-error = "#FFFFFF"
--success = "#5A7E5C" --success = "#5A7E5C"

View File

@@ -20,8 +20,8 @@ elevation = { --elevation-0 = "#FAFAF8", --elevation-1 = "#F0EEEC", --elevation-
--on-secondary = "#FFFFFF" --on-secondary = "#FFFFFF"
--on-background = "#2C2A28" --on-background = "#2C2A28"
--on-surface = "#2C2A28" --on-surface = "#2C2A28"
--on-surface-medium = "rgba(44,42,40,0.68)" --on-surface-medium = "rgba(44,42,40,0.86)"
--on-surface-disabled = "rgba(44,42,40,0.38)" --on-surface-disabled = "rgba(44,42,40,0.52)"
--error = "#8C5250" --error = "#8C5250"
--on-error = "#FFFFFF" --on-error = "#FFFFFF"
--success = "#5C7A62" --success = "#5C7A62"

View File

@@ -418,9 +418,10 @@ void ApplyColorThemeToImGui(const ColorTheme& theme)
colors[ImGuiCol_ButtonHovered] = ImVec4(1.0f, 1.0f, 1.0f, 30.0f / 255.0f); colors[ImGuiCol_ButtonHovered] = ImVec4(1.0f, 1.0f, 1.0f, 30.0f / 255.0f);
colors[ImGuiCol_ButtonActive] = ImVec4(1.0f, 1.0f, 1.0f, 45.0f / 255.0f); colors[ImGuiCol_ButtonActive] = ImVec4(1.0f, 1.0f, 1.0f, 45.0f / 255.0f);
} else { } else {
colors[ImGuiCol_Button] = ImVec4(0, 0, 0, 0.05f); // Darker overlays on light themes — the old 5/8/12% were barely-there grey and washed out.
colors[ImGuiCol_ButtonHovered] = ImVec4(0, 0, 0, 0.08f); colors[ImGuiCol_Button] = ImVec4(0, 0, 0, 0.13f);
colors[ImGuiCol_ButtonActive] = ImVec4(0, 0, 0, 0.12f); colors[ImGuiCol_ButtonHovered] = ImVec4(0, 0, 0, 0.20f);
colors[ImGuiCol_ButtonActive] = ImVec4(0, 0, 0, 0.28f);
} }
// Headers (collapsing headers, tree nodes, selectable, menu items) // Headers (collapsing headers, tree nodes, selectable, menu items)

View File

@@ -1135,16 +1135,6 @@ inline std::string g_overlayCurrentKey;
// so every overlay shares one backdrop tone. `opacity` is the alpha (dialogs vary it per call). // so every overlay shares one backdrop tone. `opacity` is the alpha (dialogs vary it per call).
inline ImVec4 OverlayScrimColor(float opacity) { return ImVec4(0.04f, 0.04f, 0.06f, opacity); } inline ImVec4 OverlayScrimColor(float opacity) { return ImVec4(0.04f, 0.04f, 0.06f, opacity); }
// True when the active theme is light (app background luminance is high). Used to add extra
// separation where light-on-light would otherwise be low-contrast.
inline bool IsLightTheme() {
ImU32 bg = Background();
float r = ((bg >> IM_COL32_R_SHIFT) & 0xFF) / 255.0f;
float g = ((bg >> IM_COL32_G_SHIFT) & 0xFF) / 255.0f;
float b = ((bg >> IM_COL32_B_SHIFT) & 0xFF) / 255.0f;
return (0.299f * r + 0.587f * g + 0.114f * b) > 0.5f;
}
// Style of an overlay dialog. GlassCard = the classic scrim + glass card + boxed title bar. // Style of an overlay dialog. GlassCard = the classic scrim + glass card + boxed title bar.
// BlurFloat = the "Manage Portfolio" look: live-blur backdrop + floating content + plain heading. // BlurFloat = the "Manage Portfolio" look: live-blur backdrop + floating content + plain heading.
enum class OverlayStyle { GlassCard, BlurFloat }; enum class OverlayStyle { GlassCard, BlurFloat };
@@ -1273,12 +1263,6 @@ inline bool BeginOverlayDialog(const OverlayDialogSpec& spec)
GlassPanelSpec cardGlass; GlassPanelSpec cardGlass;
cardGlass.rounding = 16.0f; cardGlass.fillAlpha = 35; cardGlass.borderAlpha = 50; cardGlass.borderWidth = 1.0f; cardGlass.rounding = 16.0f; cardGlass.fillAlpha = 35; cardGlass.borderAlpha = 50; cardGlass.borderWidth = 1.0f;
DrawGlassPanel(dl, cardMin, cardMax, cardGlass); DrawGlassPanel(dl, cardMin, cardMax, cardGlass);
} else if (IsLightTheme()) {
// Floating content has no card, so in a LIGHT theme it sits light-on-light with almost no
// separation. Give it a faint elevated sheet + a defining edge for contrast (kept translucent
// to preserve the airy "floating" feel; dark themes already read fine, so they're unchanged).
dl->AddRectFilled(cardMin, cardMax, WithAlpha(Surface(), 60), 20.0f);
dl->AddRect(cardMin, cardMax, WithAlpha(OnSurface(), 55), 20.0f, 0, 1.5f);
} }
// Click outside the card dismisses — but not on the appearing frame (the opening click) or while // Click outside the card dismisses — but not on the appearing frame (the opening click) or while