CreateSkin - ProGUI Reference Manual

Syntax

Skin = CreateSkin(Name$)

Description

Creates a new, empty skin object in memory. This skin can then be populated with styling rules using SkinSetValue() or potentially saved later using SaveSkin().

Parameters

Name$
A string identifying the name of the skin. This name is used when saving the skin to disk.

Return Value

Returns a handle to the newly created skin object if successful, or #Null if the name was invalid or memory allocation failed.

Remarks

Creating a skin object is the first step if you intend to define skin properties programmatically rather than loading them from files. The created skin will be empty initially. You can set it as the default skin for all unassigned widgets using SkinSetDefault().

Example

IncludeFile "ProGUI_PB.pbi"

StartProGUI()

; --- Event Handlers ---
Procedure DrawCardHandler(Widget, EventType, *EventData.PG_EventDraw, *UserData)
  ; Ask ProGUI to render the text according to the skin's rules
  DrawSkinText(Widget, "", 0, 0, *EventData\width, *EventData\height, "Hover over me!")
EndProcedure

Procedure MouseCardHandler(Widget, EventType, *EventData.PG_EventMouse, *UserData)
  Select EventType
    Case #PG_Event_MouseEnter
      WidgetSetSkinState(Widget, "hover")
    Case #PG_Event_MouseLeave
      WidgetSetSkinState(Widget, "")
  EndSelect
EndProcedure

; Create a new skin named "MyCustomSkin"
MySkin = CreateSkin("MyCustomSkin")

If MySkin
  Debug "Skin 'MyCustomSkin' created successfully."

  ; Set it as the default skin so all widgets use it automatically
  SkinSetDefault(MySkin)
  
  ; Because this is a completely empty new skin we need to set up some window skin properties
  ; otherwise the window chrome and client area will show as "under-construction" widgets!
  ; Ordinarily you would just edit the default skin or copy the "Skins/Default/" folder
  ; to a new folder "Skins/MyNewSkin/" (and LoadSkin("MyNewSkin")) and just edit the CSS files
  ; using something like VSCode, that way you can easily change the properties while your
  ; app is running and see the changes in realtime (with automatic live-reload!).
  
  ; ============================================================
  ;  OBSIDIAN DARK THEME
  ;  A modern, deep dark skin with blue accents
  ; ============================================================
  
  ; Window styling
  SkinSetValue("window-client", "", "", "background", "rgb(18, 18, 22)")
  SkinSetValue("window-client", "inactive", "", "background", "rgb(18, 18, 22)")
  SkinSetValue("window", "", "", "border", "1px rgba(90, 120, 220, 0.45) mask-inner")
  SkinSetValue("window", "inactive", "", "border", "1px rgba(255, 255, 255, 0.07) mask-inner")
  SkinSetValue("window", "", "", "box-shadow", "0 0px 40px rgba(0, 0, 0, 0.75), 0 30px 80px rgba(0, 0, 0, 0.6), 0 0px 80px rgba(70, 100, 255, 0.08)")
  SkinSetValue("window", "inactive", "", "box-shadow", "0 0px 20px rgba(0, 0, 0, 0.6), 0 25px 60px rgba(0, 0, 0, 0.5)")
  SkinSetValue("window", "", "", "border-radius", "10px")
  SkinSetValue("window", "maximized", "", "border", "none")
  SkinSetValue("window", "maximized", "", "border-radius", "none")
  SkinSetValue("window", "", "", "transition", "border .3s")
  
  ; ── Title bar ────────────────────────────────────────────────
  SkinSetValue("titlebar", "", "", "background", "rgb(24, 24, 30)")
  SkinSetValue("titlebar", "deactive", "", "background", "rgb(21, 21, 26)")
  SkinSetValue("titlebar", "", "", "transition", "background .3s")
  
  SkinSetValue("titlebarTitle", "", "", "color", "rgba(220, 225, 255, 0.92)")
  SkinSetValue("titlebarTitle", "deactive", "", "color", "rgba(150, 155, 180, 0.55)")
  SkinSetValue("titlebarTitle", "", "", "text-align", "left")
  SkinSetValue("titlebarTitle", "", "", "vertical-align", "center")
  SkinSetValue("titlebarTitle", "", "", "text-overflow", "ellipsis")
  SkinSetValue("titlebarTitle", "", "", "text-rendermode", "cleartype")
  SkinSetValue("titlebarTitle", "", "", "transition", "color .3s")
  
  ; exe-icon
  SkinSetValue("titlebarAppIcon", "", "", "background", "url('exe-icon') no-repeat center")
  
  ; ── Minimize button ──────────────────────────────────────────
  SkinSetValue("titlebarMinimize", "", "", "background", "var(glyph-titlebar-active-min) no-repeat center")
  SkinSetValue("titlebarMinimize", "deactive", "", "background", "var(glyph-titlebar-deactive-min) no-repeat center")
  SkinSetValue("titlebarMinimize", "deactive", "", "background-opacity", "25%")
  SkinSetValue("titlebarMinimize", "hover", "", "background", "var(glyph-titlebar-active-min) no-repeat center, rgba(90, 120, 220, 0.22)")
  SkinSetValue("titlebarMinimize", "hover", "", "background-opacity", "100%")
  SkinSetValue("titlebarMinimize", "deactive-hover", "", "background", "var(glyph-titlebar-deactive-min) no-repeat center, rgba(255, 255, 255, 0.07)")
  SkinSetValue("titlebarMinimize", "deactive-hover", "", "background-opacity", "100%")
  SkinSetValue("titlebarMinimize", "active", "", "background", "var(glyph-titlebar-active-min) no-repeat center, rgba(90, 120, 220, 0.38)")
  SkinSetValue("titlebarMinimize", "active", "", "background-opacity", "100%")
  SkinSetValue("titlebarMinimize", "hover-active", "", "background", "var(glyph-titlebar-active-min) no-repeat center")
  SkinSetValue("titlebarMinimize", "hover-active", "", "background-opacity", "100%")
  SkinSetValue("titlebarMinimize", "", "", "transition", "background .3s, border .3s")
  SkinSetValue("titlebarMinimize", "hover", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarMinimize", "hover-active", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarMinimize", "deactive-hover", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarMinimize", "deactive", "", "transition", "background 0s, border 0s")
  
  ; ── Maximize button ──────────────────────────────────────────
  SkinSetValue("titlebarMaximize", "", "", "background", "var(glyph-titlebar-active-max) no-repeat center")
  SkinSetValue("titlebarMaximize", "deactive", "", "background", "var(glyph-titlebar-deactive-max) no-repeat center")
  SkinSetValue("titlebarMaximize", "deactive", "", "background-opacity", "25%")
  SkinSetValue("titlebarMaximize", "hover", "", "background", "var(glyph-titlebar-active-max) no-repeat center, rgba(90, 120, 220, 0.22)")
  SkinSetValue("titlebarMaximize", "hover", "", "background-opacity", "100%")
  SkinSetValue("titlebarMaximize", "deactive-hover", "", "background", "var(glyph-titlebar-deactive-max) no-repeat center, rgba(255, 255, 255, 0.07)")
  SkinSetValue("titlebarMaximize", "deactive-hover", "", "background-opacity", "100%")
  SkinSetValue("titlebarMaximize", "active", "", "background", "var(glyph-titlebar-active-max) no-repeat center, rgba(90, 120, 220, 0.38)")
  SkinSetValue("titlebarMaximize", "active", "", "background-opacity", "100%")
  SkinSetValue("titlebarMaximize", "hover-active", "", "background", "var(glyph-titlebar-active-max) no-repeat center")
  SkinSetValue("titlebarMaximize", "hover-active", "", "background-opacity", "100%")
  SkinSetValue("titlebarMaximize", "", "", "transition", "background .3s, border .3s")
  SkinSetValue("titlebarMaximize", "hover", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarMaximize", "hover-active", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarMaximize", "deactive-hover", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarMaximize", "deactive", "", "transition", "background 0s, border 0s")
  
  ; ── Maximize button – maximized state ────────────────────────
  SkinSetValue("titlebarMaximize", "maximized", "", "background", "var(glyph-titlebar-active-restore) no-repeat center")
  SkinSetValue("titlebarMaximize", "maximized-deactive", "", "background", "var(glyph-titlebar-deactive-restore) no-repeat center")
  SkinSetValue("titlebarMaximize", "maximized-deactive", "", "background-opacity", "25%")
  SkinSetValue("titlebarMaximize", "maximized-hover", "", "background", "var(glyph-titlebar-active-restore) no-repeat center, rgba(90, 120, 220, 0.22)")
  SkinSetValue("titlebarMaximize", "maximized-hover", "", "background-opacity", "100%")
  SkinSetValue("titlebarMaximize", "maximized-deactive-hover", "", "background", "var(glyph-titlebar-deactive-restore) no-repeat center, rgba(255, 255, 255, 0.07)")
  SkinSetValue("titlebarMaximize", "maximized-deactive-hover", "", "background-opacity", "100%")
  SkinSetValue("titlebarMaximize", "maximized-active", "", "background", "var(glyph-titlebar-active-restore) no-repeat center, rgba(90, 120, 220, 0.38)")
  SkinSetValue("titlebarMaximize", "maximized-active", "", "background-opacity", "100%")
  SkinSetValue("titlebarMaximize", "maximized-hover-active", "", "background", "var(glyph-titlebar-active-restore) no-repeat center")
  SkinSetValue("titlebarMaximize", "maximized-hover-active", "", "background-opacity", "100%")
  SkinSetValue("titlebarMaximize", "maximized", "", "transition", "background .3s, border .3s")
  SkinSetValue("titlebarMaximize", "maximized-hover", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarMaximize", "maximized-hover-active", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarMaximize", "maximized-deactive-hover", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarMaximize", "maximized-deactive", "", "transition", "background 0s, border 0s")
  
  ; ── Close button ─────────────────────────────────────────────
  SkinSetValue("titlebarClose", "", "", "background", "var(glyph-titlebar-active-close) no-repeat center, rgba(180, 38, 50, 0.0)")
  SkinSetValue("titlebarClose", "deactive", "", "background", "var(glyph-titlebar-deactive-close) no-repeat center")
  SkinSetValue("titlebarClose", "deactive", "", "background-opacity", "25%")
  SkinSetValue("titlebarClose", "hover", "", "background", "var(glyph-titlebar-active-close-hover) no-repeat center, rgba(196, 43, 56, 0.85)")
  SkinSetValue("titlebarClose", "hover", "", "background-opacity", "100%")
  SkinSetValue("titlebarClose", "deactive-hover", "", "background", "var(glyph-titlebar-active-close-hover) no-repeat center, rgba(196, 43, 56, 0.70)")
  SkinSetValue("titlebarClose", "deactive-hover", "", "background-opacity", "100%")
  SkinSetValue("titlebarClose", "active", "", "background", "var(glyph-titlebar-active-close-hover) no-repeat center, rgba(140, 28, 38, 0.95)")
  SkinSetValue("titlebarClose", "active", "", "background-opacity", "100%")
  SkinSetValue("titlebarClose", "hover-active", "", "background", "var(glyph-titlebar-active-close) no-repeat center, rgba(180, 38, 50, 0.0)")
  SkinSetValue("titlebarClose", "hover-active", "", "background-opacity", "100%")
  SkinSetValue("titlebarClose", "", "", "transition", "background .3s, border .3s")
  SkinSetValue("titlebarClose", "hover", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarClose", "hover-active", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarClose", "deactive-hover", "", "transition", "background 0s, border 0s")
  SkinSetValue("titlebarClose", "deactive", "", "transition", "background 0s, border 0s")

  ; Define base rules for a custom "card" class programmatically
  SkinSetValue("card", "", "", "background", "linear-gradient(to bottom, #ffffff, #e0e0e0)")
  SkinSetValue("card", "", "", "border", "1px solid #cccccc")
  SkinSetValue("card", "", "", "border-radius", "8px")
  SkinSetValue("card", "", "", "box-shadow", "2px 2px 10px rgba(0, 0, 0, 0.15)")
  
  ; Define text properties for the "card"
  SkinSetValue("card", "", "", "color", "#333333")
  SkinSetValue("card", "", "", "font-family", "Segoe UI")
  SkinSetValue("card", "", "", "font-size", "16px")
  SkinSetValue("card", "", "", "font-weight", "bold")
  SkinSetValue("card", "", "", "text-align", "center")
  SkinSetValue("card", "", "", "vertical-align", "center")
  
  ; Set up a fluid transition for hovering
  SkinSetValue("card", "", "", "transition", "background 0.4s ease, border-radius 0.4s ease-out-bounce, box-shadow 0.4s ease, color 0.4s ease")

  ; Define rules for the "hover" state of the "card" class
  SkinSetValue("card", "hover", "", "background", "linear-gradient(to bottom, #f0f8ff, #add8e6)")
  SkinSetValue("card", "hover", "", "border-radius", "20px")
  SkinSetValue("card", "hover", "", "box-shadow", "4px 4px 15px rgba(0, 0, 0, 0.3)")
  SkinSetValue("card", "hover", "", "color", "#000080")
  
  ; --- UI Setup ---
  MyWindow = CreateWindow(0, 0, 400, 300, "CreateSkin Example", #PG_Window_Default | #PG_Window_LayoutFlex)
  
  If MyWindow
    ; Center everything inside the window's flex layout
    LayoutSetPadding(#Null, 30)
    LayoutFlexSetAlignItems(#Null, #PG_Flex_AlignItems_Center)
    LayoutFlexSetJustify(#Null, #PG_Flex_Justify_Center)

    ; Create a widget and assign our newly defined "card" class to it
    MyCard = CreateWidget(0, 0, 200, 100)
    WidgetSetClass(MyCard, "card") 
    
    ; Attach the handlers
    AddEventHandler(MyCard, #PG_Event_Draw, @DrawCardHandler())
    AddEventHandler(MyCard, #PG_Event_MouseEnter, @MouseCardHandler())
    AddEventHandler(MyCard, #PG_Event_MouseLeave, @MouseCardHandler())

    WindowShow(MyWindow, #True, #PG_WindowShow_ScreenCentered)

    Repeat
      Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
  EndIf
  
Else
  Debug "Failed to create skin."
EndIf

StopProGUI()

Supported OS

Windows, Linux