Theming System
Understand how Beep Controls theming works and how to customize it
Overview
The theming system has three layers that work together:
- BeepThemesManager — Static manager that discovers
IBeepThemeimplementations via assembly reflection, firesThemeChangedevents - BeepStyling — Central coordinator with 130+ painter classes across 27 design systems (Material3, Fluent2, iOS15, AntDesign, ChakraUI, etc.)
- BaseControl / BeepiFormPro — All controls and forms subscribe to theme events and re-render automatically
BeepThemesManager — Theme Discovery & Switching
BeepThemesManager is a static class in TheTechIdea.Beep.Winform.Controls.ThemeManagement.
On startup it scans all loaded assemblies for classes implementing IBeepTheme and collects them automatically.
Theme initialization and switching
using TheTechIdea.Beep.Winform.Controls.ThemeManagement;
// Call once at startup — scans assemblies via reflection
BeepThemesManager.InitializeThemes();
// Switch theme at runtime — all controls respond automatically
BeepThemesManager.ApplyTheme("MaterialBlue");
// Listen for theme changes
BeepThemesManager.ThemeChanged += (sender, theme) =>
{
Console.WriteLine($"Theme changed to: {theme.ThemeName}");
};
// Listen for form style changes
BeepThemesManager.FormStyleChanged += (sender, style) =>
{
Console.WriteLine($"Form style changed to: {style}");
};
Key Members
| Member | Description |
|---|---|
InitializeThemes() | Scans executing, entry, and all Beep-related assemblies for IBeepTheme classes |
ApplyTheme(name) | Sets the active theme and fires ThemeChanged |
GetTheme(name) | Returns a specific IBeepTheme by name |
GetDefaultTheme() | Returns the fallback theme (DefaultBeepTheme) |
ThemeChanged | Event fired when active theme changes |
FormStyleChanged | Event fired when form style changes |
DpiChanged | Event fired when DPI scale changes |
IBeepTheme Interface
Every theme implements IBeepTheme. You can create custom themes by inheriting BeepThemeBase:
Creating a custom theme
using TheTechIdea.Beep.Vis.Modules2;
public class MyCustomTheme : BeepThemeBase, IBeepTheme
{
public MyCustomTheme()
{
ThemeName = "MyCustomTheme";
// Colors
PrimaryColor = Color.FromArgb(99, 102, 241);
SecondaryColor = Color.FromArgb(139, 92, 246);
BackgroundColor = Color.FromArgb(249, 250, 251);
SurfaceColor = Color.White;
TextColor = Color.FromArgb(31, 41, 55);
// Typography
FontFamily = "Inter";
FontSize = 14f;
// Borders
BorderRadius = 8;
BorderWidth = 1;
BorderColor = Color.FromArgb(229, 231, 235);
}
}
Themes are auto-discovered: just compile them into any assembly loaded by your app and call InitializeThemes(). No manual registration needed.
BeepStyling — 27 Design Systems
BeepStyling is a static class in TheTechIdea.Beep.Winform.Controls.Styling
that coordinates 130+ painter classes across 7 categories:
| Painter Folder | Count | Purpose |
|---|---|---|
| BackgroundPainters | 36 | Fill backgrounds per design system |
| BorderPainters | 27 | Border drawing (rounded, sharp, glow, etc.) |
| ShadowPainters | 27 | Shadow/elevation effects |
| SpinnerButtonPainters | 26 | Spin button rendering |
| PathPainters | 23 | Shape/path rendering |
| TextPainters | 5 | Text layout and rendering |
| ImagePainters | 1 | Image/SVG rendering (StyledImagePainter) |
Additionally, 5 helper systems provide shared utilities: Colors, Spacing, Borders, Shadows, and Typography.
Setting the global control style
using TheTechIdea.Beep.Winform.Controls.Styling;
// Set the global control style — all painters switch to match
BeepStyling.SetControlStyle(BeepControlStyle.Material3);
// Listen for style changes
BeepStyling.ControlStyleChanged += (s, style) =>
{
Console.WriteLine($"Control style: {style}");
};
BaseControl Painter Kinds
Every control inheriting from BaseControl has a PainterKind property that selects the visual strategy:
| PainterKind | Visual Style |
|---|---|
Auto | Follows the global theme & style automatically |
Classic | Traditional flat rendering |
Material | Material Design with elevation and ripple |
Card | Card-based layout with shadow |
Glassmorphism | Frosted glass effect |
Neumorphism | Soft embossed/debossed look |
NeoBrutalist | Bold outlines, offset shadows |
Button | Optimized for button rendering |
ShortcutCard | Compact card for shortcuts/actions |
ReadingCard | Card for readable content |
Minimalist | Minimal with thin borders |
Using PainterKind
var card = new BeepPanel();
card.PainterKind = BaseControlPainterKind.Card; // Card with shadow
card.Size = new Size(300, 200);
var btn = new BeepButton();
btn.PainterKind = BaseControlPainterKind.Glassmorphism; // Frosted glass
btn.Text = "Glass Button";
BeepiFormPro Form Styles
BeepiFormPro supports 35+ form styles via the FormStyle enum. Each style has a dedicated form painter:
OS Styles
Modern, Minimal, MacOS, Fluent, iOS, Ubuntu, KDE, ArcLinux, GNOME
Design Styles
Material, MaterialYou, Glass, Glassmorphism, NeoMorphism, Brutalist, Neon, Holographic
Editor Themes
Dracula, Solarized, OneDark, GruvBox, Nord, Tokyo
Web/App Styles
Shadcn, RadixUI, NextJS, Linear, Paper, Metro, Metro2
Fun Styles
Cartoon, ChatBubble, Retro, Cyberpunk, Nordic, Terminal
Custom
Use FormStyle.Custom with your own IFormPainter implementation
Setting FormStyle
public class MyApp : BeepiFormPro
{
public MyApp()
{
FormStyle = FormStyle.Cyberpunk; // Try any style
}
}
Key Classes Summary
| Class | Namespace | Role |
|---|---|---|
BeepThemesManager | ThemeManagement | Auto-discovers themes, fires ThemeChanged events |
BeepStyling | Styling | Central coordinator for 130+ painters across 27 design systems |
BeepThemeBase | Vis.Modules2.0 | Abstract base for custom themes |
IBeepTheme | Vis.Modules2.0 | Interface all themes implement |
StyledImagePainter | Styling/ImagePainters | SVG/PNG rendering with theme-aware tinting |
PaintersFactory | Styling | Creates and caches painter instances per design system |