Skinning Overview
ProGUI features a powerful CSS-inspired skinning system that allows developers to define the visual appearance and transitions of widgets externally, separating style from application logic. Skins are defined primarily using `.css`-like files.
Key aspects of the skinning system include:
- Skin Management: Skins can be created (CreateSkin()), loaded from directories (LoadSkin()), saved (SkinSave()), and set as the application default (SkinSetDefault(), SkinGetDefault()).
- Themes: Skins can contain multiple themes (e.g., "light", "dark"). Themes are often defined by separate `.css` files within a skin's directory or using theme prefixes in selectors. The active theme can be managed using SkinSetTheme() and SkinGetTheme().
- Selectors & Specificity: Styling rules are applied based on CSS-like selectors that target widgets using their class names (set by WidgetSetClass()). Specificity rules similar to CSS apply (more specific selectors override less specific ones, e.g., `.window.button` overrides `.button`).
- States & Components: Styles can be defined for different widget states (like `:hover`, `:active`, `:disabled`) and specific components within a widget (like `thumb`, `trackbar`). Widget states are managed using WidgetSetSkinState().
- Properties & Values: Use SkinSetValue() to define rules within a skin, specifying a selector path, state, component, property (e.g., `background-color`, `border`, `transition`), and value (e.g., `red`, `10px solid blue`, `url(...)`, `0.5s ease-in`).
- Data Retrieval: Access applied skin values programmatically using SkinGetValue() (for the raw string), SkinGetData() (for typed internal data), or convenience functions like SkinGetColor() and WidgetGetSkinBorder().
- Background Rendering: The complex `background` properties (multiple images, gradients, colors, positioning, sizing, repeating, attachment, opacity) are rendered using the dedicated DrawSkinBackground() function.
- Transitions: The skinning system integrates with the animation engine. CSS-like `transition` properties can be defined to smoothly animate changes between states.
- Caching: Applied skin values are cached per widget for performance. The cache is automatically invalidated when the skin, theme, or widget's class path changes.
By using skins, developers can drastically change the look and feel of their application without modifying the core widget creation and layout code.