The UI Theming System in Mission Planner provides a comprehensive framework for customizing the application's visual appearance. This system allows for deep customization of colors, control styles, icon sets, and localized resources, while providing a hardware-agnostic drawing abstraction layer via SkiaSharp.
The theming system is centered around the ThemeManager class, which manages loading, storing, and applying theme settings to UI elements. Themes are collections of color values mapped to specific UI components.
The following diagram maps the logical concept of a "Theme" to the specific classes and variables used in the codebase to manage them.
Sources: Utilities/ThemeManager.cs16-51 Utilities/ThemeManager.cs99-116
Mission Planner categorizes themes into two types:
.mpsystheme): Located in the application's execution directory Utilities/ThemeManager.cs214-220.mpusertheme): Located in the user's local data directory Utilities/ThemeManager.cs222-228The GetThemesList() method scans these directories using Directory.GetFiles to populate the available themes for the user Utilities/ThemeManager.cs202-244
Mission Planner uses a custom drawing abstraction to support cross-platform rendering (Windows, Android, iOS) via SkiaSharp. This allows the same UI code to run across different graphics backends by wrapping SKSurface and SKCanvas.
The Graphics class implements IGraphics and provides a bridge between GDI+ style calls and the SkiaSharp engine. It maintains an internal SKPaint object for state management and an SKSurface for the drawing target ExtLibs/MissionPlanner.Drawing/Graphics.cs16-27
Sources: ExtLibs/MissionPlanner.Drawing/IGraphics.cs1-20 ExtLibs/MissionPlanner.Drawing/Graphics.cs16-52 ExtLibs/MissionPlanner.Drawing/Graphics.cs112-120
Extension methods in System.Drawing.Extension bridge standard .NET types to SkiaSharp types to maintain compatibility with legacy code:
Color.ToSKColor() converts System.Drawing.Color to SkiaSharp.SKColor ExtLibs/MissionPlanner.Drawing/Extension.cs12-17Pen.ToSKPaint() converts drawing pens to Skia paints, configuring StrokeWidth, Color, and PathEffect for dashed lines ExtLibs/MissionPlanner.Drawing/Extension.cs44-52Font.ToSKPaint() and FontFamily.ToSKTypeface() handle typeface matching. The system includes specific logic for CJK (Chinese, Japanese, Korean) characters, using fm.MatchCharacter to ensure correct font fallback for characters like '飞' (zh), 'フ' (ja), or '비' (kr) ExtLibs/MissionPlanner.Drawing/Extension.cs59-92The UI system integrates closely with a multi-language localization system using standard .resx resource files.
MissionPlanner.Strings, these provide translated text. The Strings.Designer.cs provides strongly-typed access to these values, such as Strings.BadCoords or Strings.ErrorConnecting ExtLibs/Strings/Strings.Designer.cs39-61 ExtLibs/Strings/Strings.resx120-142Properties/Resources.resx. For example, marker_07 and planebackground are used for map overlays and backgrounds Properties/Resources.resx121-130Sources: ExtLibs/Strings/Strings.Designer.cs39-61 ExtLibs/Strings/Strings.uk.resx120-122 ExtLibs/Strings/Strings.zh-Hans.resx120-122
The ThemeColorTable defines the core palette. The "BurntKermit" theme serves as the primary system default Utilities/ThemeManager.cs63-67
| Variable Name | Default Color (Hex) | Purpose |
|---|---|---|
BGColor | #262728 | Main menu background Utilities/ThemeManager.cs68 |
ControlBGColor | #434445 | Sub-menu/Panel backgrounds Utilities/ThemeManager.cs69 |
TextColor | #FFFFFF | Primary text color Utilities/ThemeManager.cs70 |
ButBG / ButBGBot | #94C11F / #CDE296 | Button gradient (Top/Bottom) Utilities/ThemeManager.cs73-74 |
HudSkyTop / HudSkyBot | Blue / LightBlue | HUD sky gradient Utilities/ThemeManager.cs94-95 |
HudGroundTop / HudGroundBot | #9BB824 / #414F07 | HUD ground gradient Utilities/ThemeManager.cs92-93 |
Themes can trigger a global icon swap in the MainV2 instance. Supported sets include BurnKermitIconSet and HighContrastIconSet Utilities/ThemeManager.cs47-51 This is applied via MainV2.instance.switchicons() which accepts icon definition classes like burntkermitmenuicons Utilities/ThemeManager.cs118-132
The ApplyThemeTo(Control control) function is the primary entry point for styling a UI tree.
[PreventTheming] attribute, it is ignored Utilities/ThemeManager.cs314-315control.Controls collection Utilities/ThemeManager.cs302-318ButBG and ButBGBot Utilities/ThemeManager.cs73-74BGColorTextBox Utilities/ThemeManager.cs71GCSViews.FlightData.myhud.setColors() Utilities/ThemeManager.cs137-140Sources: Utilities/ThemeManager.cs298-318 Utilities/ThemeManager.cs137-140 Utilities/ThemeManager.cs151-152
Refresh this wiki