Phaser home
Log inCreate a game

← Expansion packsLook

Phaser AE

Game UI skins core

Free packv3.0.0-22DLook

The shared engine of the game UI skins. Give it a material and a colour and it builds a whole `ui` theme, every button, window, slider, field and list, shaded the way a game artist shades; `game.skins` makes, recolours and switches those themes while the game runs.

This is a Free pack. Every phaser.io account can use it in their games.

Released October 18, 2026 · updated October 20, 2026

Game UI skins core: a screenshot of its demo
A note about these graphics

Expansion packs don't come with graphics. This screenshot is one way of drawing what the pack does, made for its demo: none of the sprites, tiles or backgrounds in it are in the pack.

That's by design. A pack is a game's logic, mechanics and effects, and it works with whatever art you give it. Some packs draw effects, backdrops or 3D scenes of their own, but none carries a game's sprites.

So the look is yours. Make the art on phaser.io, bring your own, or let your agent draw it in code: the same pack can look like anything.

The pack

uiSkins

function uiSkins(): Pack<{ skins: UiSkinsApi }>

Pack ui-skins: the core of the game UI skins — game.skins to make, restyle and switch skins at run time, and the shared generator the ui-skin-* packs use. It registers no skin itself: compose the ones you want after it (ui-skin-candy, ui-skin-jelly…) and choose one with game.ui.theme. Requires ui.

Helpers

buildUiSkin

function buildUiSkin(material: UiSkinMaterialDef, options: UiSkinOptions = {}): UiThemeDef

A whole ui theme from a material: every widget role (buttons default, good, warn, bad and flat; the round icon button the pause and sound buttons wear; windows, title bars and panels; sliders, toggles and progress bars; checkboxes and radios; text fields; lists and scrollbars; labels and headings) plus a style per colour, with the font it needs. Throws on a colour that is neither a name nor a hex.

buildUiSkinStyle

function buildUiSkinStyle(material: UiSkinMaterialDef, color: string, overrides: UiStyle = {}, options: UiSkinOptions = {}): UiStyle

One button style in a material and a colour, with its hover, pressed (down into its lip) and disabled (the same button in grey) looks, and a designHeight so it fits any button height. overrides are merged over the result.

UI_SKIN_COLORS

const UI_SKIN_COLORS: { readonly green: "#58d11d"; readonly red: "#f23a32"; readonly blue: "#2b8ef2"; readonly yellow: "#ffd21f"; readonly orange: "#ff8a1c"; readonly purple: "#9a4dff"; readonly pink: "#ff4fae"; readonly teal: "#16c4b0"; readonly grey: "#9ba6b9"; readonly brown: "#b5743a"; }

The named colours every skin makes a style for. Any CSS hex works where a colour is asked for.

uiSkinAlpha

const uiSkinAlpha = (css: string, a: number): string=> …

A '#rrggbb' colour with an alpha 0..1, as '#rrggbbaa': for a material's translucent parts.

uiSkinColor

function uiSkinColor(c: string): string

A colour name or hex as '#rrggbb'. Throws on anything else.

uiSkinFont

const uiSkinFont = (o: UiSkinShape, scale = 1): string=> …

The caption font at a share of the shape's size, as a style's font: uiSkinFont(o) for a button, uiSkinFont(o, 0.62) for body text.

uiSkinLighter

const uiSkinLighter = (c: string, t = 0.08): string=> …

A colour a little towards white (t, default 0.08): a hover's lift.

uiSkinMix

function uiSkinMix(a: string, b: string, t: number): string

Two '#rrggbb' colours mixed, t of the way from a to b: for a material's blends.

uiSkinPalette

function uiSkinPalette(color: string): UiSkinPalette

Work a colour out into the shades a game button is drawn in. Darks lean warm-to-orange on yellows and oranges, the way an artist shades them (a yellow button's lip is orange and its outline brown, never olive); a pale colour's caption is its ink, not white. Throws on a colour that is neither a name nor a hex.

uiSkinPress

const uiSkinPress = (o: UiSkinShape): UiStyle=> …

The usual pressed look for a shape: the face goes down into its lip, or a lipless button nudges down.

validateUiSkin

function validateUiSkin(material: UiSkinMaterialDef, options: UiSkinOptions = {}): string[]

Everything wrong with a material, as sentences (empty when it is sound): a role the widgets draw with that its theme leaves out, a field the ui pack does not know or will not accept as written, a colour that does not parse. A new skin pack's test is assert.deepEqual(validateUiSkin(MY_SKIN), []).

Functions

registerUiSkin

function registerUiSkin(k: { registry: { add(kind: string, def: unknown): void } }, material: UiSkinMaterialDef, options: UiSkinOptions = {}): void

Register a material in a skin pack's attach: its definition (so game.skins can make more from it) and its theme, made with the pack's manifest options, under its name. Requires the ui-skins pack composed first.

Types

UiSkinColor

type UiSkinColor = keyof typeof UI_SKIN_COLORS

A named skin colour.

UiSkinMaterialDef

interface UiSkinMaterialDef

A MATERIAL: everything a skin pack says. button draws a button in a palette at a shape; surfaces, when given, returns roles to put over the defaults (a cartoon's cream windows, a wood's planks). Hand one to registerUiSkin in a pack's attach, or to buildUiSkin / validateUiSkin directly.

  • name: string — The material's name, and its theme's.
  • look: string — What it looks like, in a line.
  • color: string — Its main colour by default: a UI_SKIN_COLORS name or a hex.
  • surface: string — Its windows' colour by default.
  • font: UiThemeFont — The caption font: a baked Typography GLB, usually from the CDN catalogue. Loaded when the skin is chosen.
  • size: number — Caption px at the design height (64).
  • radius: number | 'pill' — Button corners.
  • depth: number — The lip, px at the design height.
  • iconRadius?: number | 'pill' — The round icon button's corners. Default 'pill' (a circle on a square button).
  • trim?: string — Its trim's colour by default, for a material that draws a rim, bezel or frame in a colour of its own. Default white.
  • accent?: string — Its accent by default: title bars, slider fills, knobs, dots and selected rows. Default its main colour.
  • button(p: UiSkinPalette, o: UiSkinShape): UiStyle — A button in palette p at shape o: its look, hover and pressed states (disabled is made for it, in grey).
  • surfaces?(ctx: UiSkinSurfaceContext): Record<string, UiStyle> — Roles to lay over the default windows and parts.

UiSkinOptions

interface UiSkinOptions

How a skin is made from its material: the same in a skin pack's manifest options and in game.skins.make. All optional.

  • name?: string — The theme's name, for game.ui.theme = name. Default the material's.
  • color?: string — The main colour (the default button, icon buttons, sliders, title bars): a colour name or a CSS hex. Default the material's.
  • surface?: string — The hue of the default windows, panels, grooves and boxes; the generator sets their lightness. A material that draws its own keeps them (cartoon's cream parts, wood's oak and metal's steel windows). Default the material's.
  • radius?: number | 'pill' — Button corners, px at the design height, or 'pill'. Default the material's.
  • depth?: number — The lip, px at the design height; 0 makes the buttons flat. Default the material's.
  • trim?: string — The trim: the colour of a rim, bezel or frame the material draws in a colour of its own (candy's white rim, bezel's silver chrome; gold in a yellow). Materials with no trim ignore it. Default the material's.
  • accent?: string — The accent: title bars, slider fills, knobs, dots and selected rows, a second colour beside the buttons'. Default the material's, else the main colour.
  • roles?: { good?: string; warn?: string; bad?: string; flat?: string } — The colours of the roles that mean something. Defaults green, orange, red and grey.
  • colors?: Record<string, string> — Extra named colours, each a style beside the ten built in: { mint: '#3df0b0' } makes style: 'mint'.
  • designHeight?: number — The button height the styles are drawn for, px: buttons and headings of any height scale to match. Default 64.

UiSkinPalette

interface UiSkinPalette

The shades a colour is worked out into. Every one is a '#rrggbb' string.

  • face: string — The face's top: the colour, a little lighter.
  • faceTo: string — The face's bottom.
  • lip: string — The lip under the face: darker, hue-shifted (a yellow's lip is orange).
  • ink: string — The outline and a stroked caption's ink: the colour's deepest shade.
  • light: string — A highlight: the light edge under debossed letters.
  • text: string — A caption colour that reads on the face without a stroke: white, or the ink on a light colour.

UiSkinsApi

interface UiSkinsApi

game.skins: the composed skins, and skins made from them at run time.

  • readonly materials: ReadonlyArray<string> — The materials composed (one per ui-skin-* pack), by name.
  • make(spec: UiSkinSpec): UiThemeDef — A theme from a composed material: define it with game.ui.defineTheme. Throws when the material is not composed or a colour does not parse.
  • use(spec: UiSkinSpec): string — Make a theme, define it (replacing one of the same name, live) and switch to it; returns its name.
  • style(material: string, color: string, overrides?: UiStyle): UiStyle — One button style in a composed material and a colour, overrides on top: game.ui.defineStyle('mint', game.skins.style('candy', '#3df0b0')).
  • palette(color: string): UiSkinPalette — The shades a colour is worked out into.

UiSkinShape

interface UiSkinShape

The shape a skin settles on, at its design height: the caption's family and size, the corners and the lip.

  • family: string — The caption font's family.
  • size: number — The caption's px size at the design height.
  • radius: number | 'pill' — Button corners: px, or 'pill'.
  • depth: number — The lip, px; 0 for a flat button.
  • trim: string — The trim's colour, '#rrggbb': a rim, bezel or frame the material draws in a colour of its own (candy's white rim, bezel's chrome).

UiSkinSpec

interface UiSkinSpec extends UiSkinOptions

What game.skins.make takes: a composed material's name and how to make it.

  • material: string — The material: the name of a composed ui-skin-* pack's skin ('candy', 'jelly'…).

UiSkinSurfaceContext

interface UiSkinSurfaceContext

What a material's surfaces hook is handed: the main palette, the shape, and the surface colour's shades.

  • main: UiSkinPalette — The main colour's palette: the buttons'.
  • accent: UiSkinPalette — The accent colour's palette: the default title bars, slider fills, knobs, dots and selected rows wear it. The main palette unless an accent is chosen.
  • shape: UiSkinShape — The skin's shape.
  • deep: string — The surface colour, deep: a window's top.
  • deeper: string — Deeper: a window's bottom.
  • rim: string — Lit: a window's rim.
  • groove: string — Darkest: grooves and boxes.
  • defaults: Readonly<Record<string, UiStyle>> — The default windows and parts, to build on.
  • font(scale: number): string — The caption font at a share of the button size: font(0.62) is body text.