Themes reference

WindUI ships with 17 built-in themes you can switch at runtime. Each theme is a table of Color3 values (and optional gradients) that controls every visual element in the window system.

Theming API

`WindUI:SetTheme(name)`

Switch to a built-in or previously registered custom theme. Returns the theme table on success, or nil if the name is not found.

WindUI:SetTheme("Dark")
WindUI:SetTheme("Amber")
WindUI:SetTheme("MyTheme") -- custom theme registered with AddTheme

`WindUI:GetThemes()`

Returns the full table of all registered themes (built-in and custom).

local themes = WindUI:GetThemes()
for name, theme in pairs(themes) do
    print(name)
end

`WindUI:GetCurrentTheme()`

Returns the Name string of the currently active theme.

print(WindUI:GetCurrentTheme()) -- "Dark"

`WindUI:OnThemeChange(callback)`

Registers a function that is called whenever SetTheme succeeds. Receives the new theme name as its only argument.

WindUI:OnThemeChange(function(name)
    print("Theme changed to:", name)
end)

`WindUI:AddTheme(themeTable)`

Registers a custom theme table. After calling this, the theme is available by Name in SetTheme. Returns the theme table.

local myTheme = WindUI:AddTheme({
    Name = "MyTheme",
    Background = Color3.fromHex("#1a1a2e"),
    Accent     = Color3.fromHex("#16213e"),
    Text       = Color3.fromHex("#e0e0e0"),
    -- ... other keys
})

WindUI:SetTheme("MyTheme")

Built-in themes

Dark

The default theme. Dark charcoal background with a near-black accent.

Key	Value
Background	`#101010`
Accent	`#18181b`
Dialog	`#161616`
Text	`#ffffff`
Placeholder	`#7a7a7a`
Button	`#52525b`
Icon	`#a1a1aa`
Toggle	`#33c759`
Slider	`#0091ff`
Checkbox	`#0091ff`
Primary	`#0091ff`
SliderIcon	`#908f95`
PanelBackground	`#ffffff` @ 0.95 transparency
LabelBackground	`#000000` @ 0.83 transparency

Light

A light-mode theme with a near-white accent and black text.

Key	Value
Background	`#e9e9e9`
Accent	`#ffffff`
Dialog	`#f4f4f5`
Text	`#000000`
Placeholder	`#555555`
Button	`#18181b`
Icon	`#52525b`
Toggle	`#33c759`
Slider	`#0091ff`
Checkbox	`#0091ff`
PanelBackground	`#ffffff` @ 0 transparency
LabelBackground	`#ffffff` @ 0 transparency

Rose

Deep crimson background with rose-pink tones throughout.

Key	Value
Background	`#1f0308`
Accent	`#be185d`
Dialog	`#4c0519`
Text	`#fdf2f8`
Placeholder	`#d67aa6`
Button	`#e95f74`
Icon	`#fb7185`

Plant

Deep forest background with lush green accents.

Key	Value
Background	`#0a1b0f`
Accent	`#166534`
Dialog	`#052e16`
Text	`#f0fdf4`
Placeholder	`#4fbf7a`
Button	`#16a34a`
Icon	`#4ade80`

Red

Near-black background with bold red accents.

Key	Value
Background	`#1c0606`
Accent	`#991b1b`
Dialog	`#450a0a`
Text	`#fef2f2`
Placeholder	`#d95353`
Button	`#dc2626`
Icon	`#ef4444`

Indigo

Very dark navy background with deep indigo/blue accents.

Key	Value
Background	`#0f0a2e`
Accent	`#3730a3`
Dialog	`#1e1b4b`
Text	`#f1f5f9`
Placeholder	`#7078d9`
Button	`#4f46e5`
Icon	`#6366f1`

Sky

Deep ocean blue background with bright cyan accents.

Key	Value
Background	`#051a26`
Accent	`#00d4ff`
Dialog	`#0a4d66`
Text	`#e6f7ff`
Placeholder	`#66b3cc`
Button	`#00a8cc`
Icon	`#2db8d9`
Toggle	`#00d9d9`
Slider	`#00d4ff`
Checkbox	`#00d4ff`
PanelBackground	`#0d3a47` @ 0.8 transparency

Violet

Very dark purple background with vivid violet accents.

Key	Value
Background	`#1e0a3e`
Accent	`#6d28d9`
Dialog	`#3c1361`
Text	`#faf5ff`
Placeholder	`#8f7ee0`
Button	`#7c3aed`
Icon	`#8b5cf6`

Amber

A fully gradient-driven theme with warm amber and gold tones. All major color keys use WindUI:Gradient().

Key	Value
Background	Gradient `#1c1003` → `#3f210d` (90°)
Accent	Gradient `#b45309` → `#d97706` (45°)
Dialog	Gradient `#451a03` → `#6b2e05` (90°)
Text	Gradient `#fffbeb` → `#fff7ed` (45°)
Placeholder	Gradient `#d1a326` → `#fbbf24` (45°)
Button	Gradient `#d97706` → `#f59e0b` (45°)
Toggle	Gradient `#d97706` → `#f59e0b` (45°)
Checkbox	Gradient `#d97706` → `#fbbf24` (45°)
Icon	`#f59e0b`
Slider	`#d97706`
PanelBackground	`#ffffff` @ 0.95 transparency

Emerald

Very dark teal background with rich emerald green accents.

Key	Value
Background	`#011411`
Accent	`#047857`
Dialog	`#022c22`
Text	`#ecfdf5`
Placeholder	`#3fbf8f`
Button	`#059669`
Icon	`#10b981`

Midnight

Very dark navy background with royal blue accents.

Key	Value
Background	`#0a0f1e`
Accent	`#1e3a8a`
Dialog	`#0c1e42`
Text	`#dbeafe`
Placeholder	`#2f74d1`
Button	`#2563eb`
Primary	`#2563eb`
Icon	`#5591f4`

Crimson

Near-black background with deep crimson accents.

Key	Value
Background	`#0c0404`
Accent	`#b91c1c`
Dialog	`#450a0a`
Text	`#fef2f2`
Placeholder	`#6f757b`
Button	`#991b1b`
Icon	`#dc2626`

Monokai Pro

Inspired by the Monokai Pro editor theme. Dark charcoal background with orange accent and colorful highlights.

Key	Value
Background	`#191622`
Accent	`#fc9867`
Dialog	`#1e1e1e`
Text	`#fcfcfa`
Placeholder	`#6f6f6f`
Button	`#ab9df2`
Icon	`#a9dc76`

Cotton Candy

Dark purple background with bright pink and cyan accents.

Key	Value
Background	`#1a0b2e`
Accent	`#ec4899`
Dialog	`#2d1b3d`
Text	`#fdf2f8`
Placeholder	`#8a5fd3`
Button	`#d946ef`
Slider	`#d946ef`
Icon	`#06b6d4`

Mellowsi

Warm dark brown background with muted tan and gold accents.

Key	Value
Background	`#1c1002`
Accent	`#342a1e`
Dialog	`#291c13`
Text	`#f5ebdd`
Placeholder	`#9c8a73`
Button	`#342a1e`
Icon	`#c9b79c`
Toggle	`#a9873f`
Slider	`#c9a24d`
Checkbox	`#c9a24d`

Rainbow

A fully gradient-driven theme where every color key spans the full visible spectrum. Intended for novelty use.

Key	Value
Background	Gradient `#ff0040` → `#ff4000` → `#ffff00` → `#00ff40` → `#0040ff` → `#4000ff` (90°)
Accent	Gradient `#00ff41` → `#00ffff` → `#0080ff` → `#8000ff` (45°)
Dialog	Gradient `#ff0080` → `#8000ff` → `#0080ff` → `#00ff80` → `#ff8000` (135°)
Button	Gradient `#ff0080` → `#ff8000` → `#ffff00` → `#80ff00` → `#00ffff` (60°)
Text	`#ffffff`
Placeholder	`#00ff80`
Icon	`#ffffff`

Custom themes

Color key reference

Pass any combination of the following keys to WindUI:AddTheme(). Keys you omit fall back to the values defined in the fallback table (see fallback resolution below).

Key	Type	Description
`Name`	`string`	Required. Used as the identifier in `SetTheme`.
`Background`	`Color3` or gradient	Main window background.
`Accent`	`Color3` or gradient	Sidebar / topbar fill.
`Dialog`	`Color3` or gradient	Dialog and popup background. Defaults to `Accent`.
`Outline`	`Color3`	Border and outline color.
`Text`	`Color3` or gradient	Primary text color.
`Placeholder`	`Color3`	Input placeholder text color.
`Button`	`Color3` or gradient	Button fill color.
`Icon`	`Color3`	Icon tint color.
`Toggle`	`Color3` or gradient	Toggle switch active color. Defaults to `Button`.
`Slider`	`Color3`	Slider track fill. Defaults to `Primary`.
`Checkbox`	`Color3` or gradient	Checkbox active fill. Defaults to `Primary`.
`Primary`	`Color3`	Accent color used for interactive controls. Defaults to `Icon`.
`SliderIcon`	`Color3`	Icon color on slider elements. Defaults to `Icon`.
`PanelBackground`	`Color3`	Tab panel background. Defaults to white.
`PanelBackgroundTransparency`	`number`	Transparency for `PanelBackground` (0–1). Defaults to `0.95`.
`LabelBackground`	`Color3`	Section label background. Defaults to white.
`LabelBackgroundTransparency`	`number`	Transparency for `LabelBackground` (0–1). Defaults to `0.95`.
`WindowTopbarTitle`	`Color3`	Window title text color. Defaults to `Text`.
`WindowTopbarAuthor`	`Color3`	Author subtitle text color. Defaults to `Text`.
`WindowTopbarIcon`	`Color3`	Topbar icon tint. Defaults to `Icon`.
`WindowTopbarButtonIcon`	`Color3`	Topbar button icon tint. Defaults to `Icon`.
`WindowShadow`	`Color3`	Drop shadow color. Defaults to black.

Fallback resolution

When a key is omitted, WindUI resolves it through a chain of fallbacks. For example:

Dialog → falls back to Accent
Toggle → falls back to Button
Slider → falls back to Primary → falls back to Icon
Primary → falls back to Icon
PanelBackground → falls back to white at 0.95 transparency

You only need to set the keys you want to override.

Solid color custom theme

WindUI:AddTheme({
    Name       = "Ocean",
    Background = Color3.fromHex("#0d1b2a"),
    Accent     = Color3.fromHex("#1b3a4b"),
    Dialog     = Color3.fromHex("#0a2236"),
    Text       = Color3.fromHex("#e0f0ff"),
    Placeholder = Color3.fromHex("#5b8fa8"),
    Button     = Color3.fromHex("#2196a8"),
    Icon       = Color3.fromHex("#4dd0e1"),
    Toggle     = Color3.fromHex("#00bcd4"),
    Slider     = Color3.fromHex("#0097a7"),
    Checkbox   = Color3.fromHex("#00bcd4"),
    Primary    = Color3.fromHex("#0097a7"),
})

WindUI:SetTheme("Ocean")

Gradient colors

WindUI:Gradient(stops, props) builds a gradient descriptor that any theme color key accepts instead of a plain Color3. Parameters:

stops — a table keyed by string percentages ("0" to "100"). Each stop has:
- Color — a Color3 value.
- Transparency — a number from 0 to 1.
props — optional table of additional properties merged into the result. Use Rotation (number, degrees) to control the gradient angle.

Returns a gradient data table with Color (ColorSequence), Transparency (NumberSequence), and any extra props fields.

WindUI:AddTheme({
    Name = "MyTheme",

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

    Background = Color3.fromHex("#1a1a1a"),
    Text       = Color3.fromHex("#ffffff"),
    Button     = Color3.fromHex("#d97706"),
    Icon       = Color3.fromHex("#f59e0b"),
})

WindUI:SetTheme("MyTheme")

You can mix gradient and solid keys freely in the same theme, as the Amber theme does.

Gradients work on Accent, Dialog, Text, Placeholder, Background, Button, Toggle, and Checkbox. Use solid Color3 values for Icon, Slider, Primary, SliderIcon, and transparency keys.

Advanced Usage

Reference

Themes reference

Theming API

`WindUI:SetTheme(name)`

`WindUI:GetThemes()`

`WindUI:GetCurrentTheme()`

`WindUI:OnThemeChange(callback)`

`WindUI:AddTheme(themeTable)`

Built-in themes

Custom themes

Color key reference

Fallback resolution

Solid color custom theme

Gradient colors

Build docs developers (and LLMs) love

Advanced Usage

Reference

​Theming API

​WindUI:SetTheme(name)

​WindUI:GetThemes()

​WindUI:GetCurrentTheme()

​WindUI:OnThemeChange(callback)

​WindUI:AddTheme(themeTable)

​Built-in themes

​Custom themes

​Color key reference

​Fallback resolution

​Solid color custom theme

​Gradient colors

Build docs developers (and LLMs) love

Theming API

`WindUI:SetTheme(name)`

`WindUI:GetThemes()`

`WindUI:GetCurrentTheme()`

`WindUI:OnThemeChange(callback)`

`WindUI:AddTheme(themeTable)`

Built-in themes

Custom themes

Color key reference

Fallback resolution

Solid color custom theme

Gradient colors