Theming System
When Modifying Theme Color Keys
Update ALL of these locations:
- •
Specs/SettingsStore.schema.json- Validation + IntelliSense - •
Specs/SettingsStoreSpec.md- Key documentation - •
RedSalamander/AppTheme.h/AppTheme.cpp- Defaults - •
RedSalamander/RedSalamander.cpp(ApplyThemeOverrides) - Mapping - •
Specs/Themes/*.theme.json5- Shipped themes - •Component specs referencing the token
Theme File Format (JSON5)
Location: Specs/Themes/ or Themes/ next to exe
json5
{
"name": "Dark Theme",
"colors": {
"background": "#1E1E1E",
"foreground": "#D4D4D4",
"accent": "#007ACC",
"selection": "#264F78",
"border": "#3C3C3C"
}
}
AppTheme Integration
cpp
// AppTheme.h
struct ThemeColors {
D2D1_COLOR_F background;
D2D1_COLOR_F foreground;
D2D1_COLOR_F accent;
};
// Load and apply
void ApplyThemeOverrides(ThemeColors& colors, const json& theme)
{
if (theme.contains("colors")) {
auto& c = theme["colors"];
if (c.contains("background")) {
colors.background = ParseColor(c["background"]);
}
// Always provide fallbacks for missing keys
}
}
Best Practices
- •Use semantic color names (
selectionnotblue1) - •Always provide fallback colors
- •Test in both light and dark modes
- •Validate contrast ratios for accessibility