SkinSetGlobalVariable - ProGUI Reference Manual

Syntax

Success = SkinSetGlobalVariable(Name$, Value$, noUpdate=#False)

Description

Defines or updates a global CSS-like variable available to all ProGUI skins.

Note - See CSS Reference for a list of ProGUI system variables such as OS accent colors.

Parameters

Name$
The name of the variable. Do not include the -- prefix; ProGUI handles variable syntax mapping internally, but generally variables map to var(name) in the CSS skin file.

Value$
The string data the variable represents (e.g., a color "rgb(255,0,0)", or a URL "url('image.png')").

noUpdate (optional)
If #True, setting the variable will not immediately trigger a full UI refresh. Default is #False.

Return Value

Returns #True if the variable was updated successfully.

Remarks

This function is immensely powerful for generating dynamic themes (e.g., light mode/dark mode toggles or OS-synced accent colors). ProGUI automatically caches variables, and if noUpdate is false, it invalidates layout and redrawing caches containing elements reliant on this variable. Used heavily by the system logic to distribute accent colors globally to window title bars, borders, etc. If a transition is applied to a skin property that contains the variable then the new value will animate smoothly from the old value.

Note - See CSS Reference for a list of ProGUI system variables such as OS accent colors.

Example

IncludeFile "ProGUI_PB.pbi"

StartProGUI()

; Set an initial global variable for our dynamic theme color
SkinSetGlobalVariable("my-theme-color", "dodgerblue")

; Define a skin class that uses our new global variable via 'var()'
SkinSetValue("myDynamicButton", "", "", "background-color", "var(my-theme-color)")
SkinSetValue("myDynamicButton", "", "", "color", "white")
SkinSetValue("myDynamicButton", "", "", "border-radius", "8px")
SkinSetValue("myDynamicButton", "", "", "text-align", "center")
SkinSetValue("myDynamicButton", "", "", "vertical-align", "center")

; Add a transition so the color change animates smoothly!
SkinSetValue("myDynamicButton", "", "", "transition", "background-color 0.6s ease-in-out-cubic")

; Draw event handler for our custom button
Procedure DrawBtnHandler(Widget, EventType, *EventData.PG_EventDraw, *UserData)
  DrawSkinText(Widget, "", 0, 0, *EventData\width, *EventData\height, "Click to Change Theme")
EndProcedure

; Mouse click event handler to toggle the global variable
Procedure ClickBtnHandler(Widget, EventType, *EventData, *UserData)
    
  Static Toggle
  Toggle = 1 - Toggle
  
  If Toggle
    ; Updating this variable instantly updates the button's background color
    ; because it references var(my-theme-color) in its skin definition.
    SkinSetGlobalVariable("my-theme-color", "crimson")
  Else
    SkinSetGlobalVariable("my-theme-color", "dodgerblue")
  EndIf

EndProcedure

MyWindow = CreateWindow(0, 0, 400, 200, "SkinSetGlobalVariable Example", #PG_Window_Default | #PG_Window_LayoutFlex)

If MyWindow
    
  LayoutSetPadding(#Null, 20)
  LayoutFlexSetAlignItems(#Null, #PG_Flex_AlignItems_Center)
  LayoutFlexSetJustify(#Null, #PG_Flex_Justify_Center)

  ; Create the widget and apply our dynamic skin class
  MyButton = CreateWidget(0, 0, 250, 50)
  WidgetSetClass(MyButton, "myDynamicButton")
  
  AddEventHandler(MyButton, #PG_Event_Draw, @DrawBtnHandler())
  AddEventHandler(MyButton, #PG_Event_MouseLeftButtonDown, @ClickBtnHandler())

  WindowShow(MyWindow, #True, #PG_WindowShow_ScreenCentered)

  Repeat
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow

EndIf

StopProGUI()

Supported OS

Windows, Linux