Skip to main content

​
Overview

WindUI ships with a full theming system. Every color used by every element — backgrounds, text, sliders, toggles, buttons, and more — is driven by the active theme. You can set a theme at window creation, switch it at runtime, listen for changes, or register your own custom themes.

​
Setting a Theme at Creation

Pass a Theme key to WindUI:CreateWindow(). The value must be the exact name of a registered theme. 
local Window = WindUI:CreateWindow({
    Title = "My Hub",
    Theme = "Dark",   -- default when omitted
})

​
Built-in Themes

NameDescription
DarkDeep zinc/charcoal background with white text and blue accents — the default.
LightWhite background with black text.
RoseDeep rose/pink tones.
PlantForest green palette.
RedTrue red dark theme.
IndigoDark indigo/navy theme.
SkyCyan and sky-blue accents on a dark teal background.
VioletPurple/violet dark theme.
AmberWarm amber tones with gradient support.
EmeraldTeal/emerald dark theme.
MidnightDeep blue/midnight theme.
CrimsonNear-black background with crimson accents.
Monokai ProDark editor-style theme with coral, purple, and green highlights.
Cotton CandyPink and cyan pastel dark theme.
MellowsiWarm brown/sepia tones.
RainbowFull-spectrum gradient accents and backgrounds.

​
Runtime API

​
WindUI:SetTheme(name)

Switches the active theme immediately. All themed UI elements update without a reload. Returns the theme table, or nil if the name is not found. 
WindUI:SetTheme("Light")

​
WindUI:GetCurrentTheme()

Returns the name of the currently active theme as a string. 
local name = WindUI:GetCurrentTheme()
print(name) -- "Dark"

​
WindUI:GetThemes()

Returns the full themes table, keyed by theme name. Useful for building a theme picker dropdown. 
local themes = WindUI:GetThemes()
for name, _ in pairs(themes) do
    print(name)
end

​
WindUI:OnThemeChange(callback)

Registers a function that is called whenever SetTheme is invoked with a valid theme name. The callback receives the new theme name as a string. 
WindUI:OnThemeChange(function(themeName)
    print("Theme changed to:", themeName)
end)

​
Custom Themes

Use WindUI:AddTheme(themeTable) to register a new theme. The theme table must have a Name field and at minimum the core color keys. It is then available by name for SetTheme and CreateWindow({ Theme = "..." }).

​
Color Keys

The following keys are recognized. Those not specified fall back to the inherited rendering defaults.
KeyTypeDescription
NamestringTheme identifier used in API calls.
AccentColor3 | gradientSidebar and accent surfaces.
BackgroundColor3 | gradientMain window background fill.
DialogColor3 | gradientDialog/modal background.
OutlineColor3Border/outline tint.
TextColor3 | gradientPrimary text and icon color.
PlaceholderColor3Placeholder text in inputs.
ButtonColor3 | gradientDefault button background.
IconColor3Icon tint color.
ToggleColor3 | gradientToggle switch active color.
SliderColor3Slider fill/thumb color.
CheckboxColor3 | gradientCheckbox active fill.
PrimaryColor3Primary action accent (used by some elements).
PanelBackgroundColor3Content panel background.
PanelBackgroundTransparencynumberTransparency for the panel (0–1).
LabelBackgroundColor3Background behind label elements.
LabelBackgroundTransparencynumberTransparency for label backgrounds.
Gradient values must be produced by WindUI:Gradient(stops, props) — see Gradient Support below.

​
Simple Custom Theme

WindUI:AddTheme({
    Name       = "Ocean",

    Accent     = Color3.fromHex("#0c3547"),
    Dialog     = Color3.fromHex("#071e2b"),
    Outline    = Color3.fromHex("#38bdf8"),
    Text       = Color3.fromHex("#e0f2fe"),
    Placeholder = Color3.fromHex("#4ea8c9"),
    Background = Color3.fromHex("#040f18"),
    Button     = Color3.fromHex("#0369a1"),
    Icon       = Color3.fromHex("#38bdf8"),
    Toggle     = Color3.fromHex("#0ea5e9"),
    Slider     = Color3.fromHex("#0ea5e9"),
    Checkbox   = Color3.fromHex("#0ea5e9"),

    PanelBackground            = Color3.fromHex("#FFFFFF"),
    PanelBackgroundTransparency = 0.95,
})

WindUI:SetTheme("Ocean")

​
Gradient Support

Any color key that accepts a gradient takes the return value of WindUI:Gradient(stops, props). stops is a table keyed by percentage strings ("0" to "100"). Each stop is a table with Color (a Color3) and an optional Transparency (number, 0–1). props is an optional table of extra properties for the UIGradient — typically { Rotation = 45 }. 
WindUI:AddTheme({
    Name = "Sunset",

    Accent = WindUI:Gradient({
        ["0"]   = { Color = Color3.fromHex("#f97316"), Transparency = 0 },
        ["100"] = { Color = Color3.fromHex("#ec4899"), Transparency = 0 },
    }, { Rotation = 45 }),

    Background = WindUI:Gradient({
        ["0"]   = { Color = Color3.fromHex("#1a0000"), Transparency = 0 },
        ["100"] = { Color = Color3.fromHex("#2d0a1e"), Transparency = 0 },
    }, { Rotation = 90 }),

    Text       = Color3.fromHex("#fff1f2"),
    Placeholder = Color3.fromHex("#d98fa0"),
    Dialog     = Color3.fromHex("#3b0017"),
    Button     = Color3.fromHex("#e11d48"),
    Icon       = Color3.fromHex("#fb7185"),
    Toggle     = Color3.fromHex("#f43f5e"),
    Slider     = Color3.fromHex("#f43f5e"),
    Checkbox   = Color3.fromHex("#f43f5e"),
})

​
Theme Picker Example

A common pattern is to build a dropdown that lets users pick the theme in-game: 
local ThemeTab = Window:Tab({ Title = "Settings", Icon = "settings" })

ThemeTab:Dropdown({
    Title  = "Theme",
    Values = (function()
        local names = {}
        for name in pairs(WindUI:GetThemes()) do
            table.insert(names, name)
        end
        table.sort(names)
        return names
    end)(),
    Value    = WindUI:GetCurrentTheme(),
    Callback = function(selected)
        WindUI:SetTheme(selected)
    end,
})

Build docs developers (and LLMs) love

Get started for freeTalk to us