Theme System Architecture
IBeepTheme contract, BeepTheme partial class decomposition, theme types (Ubuntu/GNOME/Cyberpunk/Candy/Zen), and the token resolution pipeline
Table of Contents
Overview
The Beep theme system powers the visual appearance of every control. It consists of:
- IBeepTheme — Interface defining the theme contract (in TheTechIdea.Beep.Vis.Modules2.0)
- BeepTheme — Central partial class with 35+ partial files, each handling a control type
- Theme Types — Concrete implementations: Ubuntu, GNOME, Cyberpunk, Candy, Zen
- BeepThemesManager — Singleton manager for theme registration and switching
IBeepTheme Contract
public interface IBeepTheme
{
string ThemeName { get; }
Color ButtonBackColor { get; }
Color ButtonForeColor { get; }
Color ButtonBorderColor { get; }
Color ButtonHoverColor { get; }
// ... 200+ color/style properties for every control type
Font DefaultFont { get; }
Font TitleFont { get; }
int BorderRadius { get; }
float Opacity { get; }
}BeepTheme Partial Class (35 Files)
Each partial file handles a specific control type:
| File | Control Type | Properties |
|---|---|---|
| BeepTheme.cs / Core.cs / Utility.cs | Base | Name, fonts, borders, opacity |
| BeepTheme.Buttons.cs | Button | BackColor, ForeColor, Border, Hover, Pressed, Disabled |
| BeepTheme.TextBox.cs | TextBox | BackColor, ForeColor, Border, Focused, Placeholder |
| BeepTheme.ComboBox.cs | ComboBox | Field, dropdown, popup colors |
| BeepTheme.CheckBox.cs | CheckBox | Check mark, box border, fill colors |
| BeepTheme.RadioButton.cs | RadioButton | Circle border, dot colors |
| BeepTheme.Grid.cs | Grid | Header, cell, alternating row, selection colors |
| BeepTheme.Chart.cs | Chart | Series palette, axis, legend colors |
| BeepTheme.Calendar.cs | Calendar | Cell, header, today, event colors |
| BeepTheme.Tab.cs | Tabs | Active, inactive, hover, border colors |
| BeepTheme.Stepper.cs | Stepper | Step node, connector, label colors |
| BeepTheme.Tree.cs | TreeView | Node, expander, selection colors |
| BeepTheme.Menu.cs | Menu | Bar, item, hover, separator colors |
| BeepTheme.Navigation.cs | Navigation | Sidebar, nav item colors |
Plus 22 more: Dialog, Login, Dashboard, StatusBar, ToolTip, FontAndTypography, Gradient, ColorPalette, Company, BlockquoteCode, Badge, Link, SideMenu, StarRating, StatsCard, TaskCard, Testimony, ScrollList, Card, ScrollBar, Switch, ProgressBar, Miscellaneous.
Theme Types
| Theme | Project | Files | Style |
|---|---|---|---|
| UbuntuTheme | Controls | 26 partial files | Ubuntu Linux aesthetic — orange accents, dark/light variants |
| GNOMETheme | Controls | 30 partial files | GNOME desktop — Adwaita colors, rounded corners |
| CyberpunkTheme | Controls | 30 partial files | Neon cyberpunk — bright magenta/cyan, dark backgrounds |
| CandyTheme | Vis.Modules2.0 | 1 file | Soft candy colors — pastels, rounded shapes |
| ZenTheme | Vis.Modules2.0 | 1 file | Minimal zen — earth tones, clean typography |
| CyberpunkNeonTheme | Vis.Modules2.0 | 5 partial files | Neon variant — brighter, more saturated |
Token Resolution
// Token resolution pipeline:
// 1. Control checks its own theme property override
// 2. Falls back to BeepThemesManager.CurrentTheme
// 3. Falls back to default theme values
public Color GetButtonBackColor(BaseControl control)
{
if (control.ThemeOverrides?.ButtonBackColor != null)
return control.ThemeOverrides.ButtonBackColor;
return BeepThemesManager.CurrentTheme
?.ButtonBackColor ?? DefaultTheme.ButtonBackColor;
}Examples
// Global theme switch
BeepThemesManager.Instance.SetTheme("DarkTheme");
// All controls update automatically
// Per-control override
myButton.ThemeOverrides = new ThemeOverrides
{
ButtonBackColor = Color.Red,
BorderRadius = 12
};
// Custom theme
var myTheme = new BeepTheme
{
ThemeName = "MyCustomTheme",
ButtonBackColor = Color.Navy,
ButtonForeColor = Color.White,
// ... configure all properties
};
BeepThemesManager.Instance.RegisterTheme(myTheme);