iwmlib

Class: Theme

Theme

Class that represents a PixiJS Theme.

new Theme (opts)

theme.js:35

Creates an instance of a Theme.

Name Type Description
opts object optional

An options object to specify to style and behaviour of the theme.

Name Type Default Description
margin number 10 optional

The outer spacing (distance to other objects) from the border.
padding number 10 optional

The inner spacing (distance from icon and/or label) to the border.
radius number 4 optional

The radius used when drawing a rounded rectangle.
fast number 0.25 optional

The duration of time when it has to be fast.
normal number 0.5 optional

The duration of time when it has to be normal.
slow number 1 optional

The duration of time when it has to be slow.
primaryColor number 0x5ec7f8 optional

The primary color of the theme.
color1 number 0x282828 optional

The first color of the theme. For example used for the background.
color2 number 0xf6f6f6 optional

The second color of the theme. For example used for the border.
fill number color1 optional

The color of the background as a hex value.
fillAlpha number 1 optional

The alpha value of the background.
fillActive number color1 optional

The color of the background when activated.
fillActiveAlpha number 1 optional

The alpha value of the background when activated.
stroke number color2 optional

The color of the border as a hex value.
strokeWidth number 0.6 optional

The width of the border in pixel.
strokeAlpha number 1 optional

The alpha value of the border.
strokeActive number color2 optional

The color of the border when activated.
strokeActiveWidth number 0.6 optional

The width of the border in pixel when activated.
strokeActiveAlpha number 1 optional

The alpha value of the border when activated.
iconColor number color2 optional

The color of the icon (set by the tint property) as a hex value.
iconColorActive number colorPrimary optional

The color of the icon when activated.
background number color1 optional

The color of a background for a component (e.g. at the Modal class).
textStyle object {} optional

A textstyle object for the styling of text. See PIXI.TextStyle for possible options. Default object:

Name Type Default Description
fontFamily string "Avenir Next", "Open Sans", "Segoe UI", ... optional

The font family.
fontWeight string 400 optional

The font weight.
fontSize number 16 optional

The font size.
fill number color2 optional

The fill color.
stroke number color1 optional

The stroke color.
strokeThickness number 0 optional

The thickness of the stroke.
miterLimit number 1 optional

The meter limit.
lineJoin string round optional

The line join.
textStyleActive object textStyle + {fill: primaryColor} optional

A textstyle object which is used for actived text.
textStyleSmall object textStyle + {fontSize: -= 3} optional

A textstyle object which is used for small text.
textStyleSmallActive object textStyleSmall + {fill: primaryColor} optional

A textstyle object which is used for small actived text.
textStyleLarge object textStyle + {fontSize: += 3} optional

A textstyle object which is used for large text.
textStyleLargeActive object textStyleLarge + {fill: primaryColor} optional

A textstyle object which is used for large actived text.
textAlpha number Theme.textAlpha optional

The alpha value of text.
textActiveAlpha number Theme.textActiveAlpha optional

The alpha value of text when activated.
See:
Example
// Create the theme
const yellow = new Theme({
    fill: 0xfecd2d,
    fillActive: 0xfe9727,
    strokeActive: 0xfecd2d,
    strokeActiveWidth: 4,
    textStyle: {
        fill: 0x5ec7f8
    },
    textStyleActive: {
        fill: 0x5954d3
    },
    textStyleLarge: {
        fontSize: 36
    }
})

// Create the app and apply the new theme to it
const app = new PIXIApp({
    view: canvas,
    width: 450,
    height: 150,
    theme: yellow
}).setup().run()

Methods

Theme.fromString (theme)Theme static

theme.js:179

Factory function

Name Type Default Description
theme string dark

The name of the theme to load.
Returns:
Type Description
Theme Returns a newly created Theme object.