Themes

Reducktion features a simple theming system that allows the user interface design to be customised by the end user.

Themes are located in the Themes sub-directory of the Reducktion home folder. To start a new theme create a new directory in this location and name it after your theme.

A theme consists of the following resources:

Background.png - a graphical image used to define the plugin background.

Knob.png - a film-strip image used to define the control knobs.

Theme.txt - the theme definition file containing colours and other parameters.

The background image must be a png file at least 2112 by 1248 pixels in size. This represents the default size of the 200% scale and will be automatically resized when different sizes are selected. If you opt to add additional margins to the background (see later) the actual size will be larger.

A single background image provides backgrounds for all the pages of the lower panel. For more detailed theming two additional images can be added:

Background2.png

Background3.png

These provide backgrounds for the Mod and Seq pages and should be 1984 by 288 pixels in size. By default these are transparent and are only required where different background graphics are required for each of the Lower Panel tabs. In such cases the main background image should be used to provide the background for the Main tab page.

The knob graphic is a vertical film-strip image file containing 101 frames each 96 by 96 pixels in size. This is used to create the animated parameter knobs. As with the background these dimension represent the 200% level scaling and will be resized as required.

Note: the free KnobMan tool can be used to create these images.

The theme definition file is a plain text file that defines the colours to be used for the various interface elements and sizes for the top, bottom and side margins. In addition a limited amount of customisation is available for fonts.

An example theme definition looks like this:

backgroundColor=0xa0 0xa0 0xa0 0xff
headerColor=0x00 0x64 0x6a 0x88
divider1Color=0x00 0x64 0x6a 0x88
divider2Color=0x80 0x80 0x80 0x88
voiceOnColor=0x00 0xff 0x00 0xff
voiceOffColor=0x00 0x00 0x00 0xff
presetButtonColor=0xff 0xff 0xff 0xff
logoFontColor=0x00 0x00 0x00 0xff
titleFontColor=0xe0 0xe0 0xe0 0xff
menuFontColor=0x00 0x00 0x00 0xff
menuBackColor=0x80 0x80 0x80 0xff
displayFontColor=0x05 0xbe 0xee 0xff
displayBackColor=0x00 0x00 0x22 0xff
labelFontColor=0x00 0x00 0x00 0xff
onTabFontColor=0x00 0x00 0x00 0xff
offTabFontColor=0x00 0x00 0x00 0xff
seqLabel1FontColor=0x00 0x00 0x00 0xff
seqLabel1BackColor=0xa0 0xa0 0xa0 0xff
seqLabel2FontColor=0x00 0x00 0x00 0xff
seqLabel2BackColor=0x80 0x80 0x80 0xff
seqLabel3FontColor=0x00 0x00 0x00 0xff
seqLabel3BackColor=0xc0 0xc0 0xc0 0xff
logoFontBold=0
titleFontBold=0
displayFontBold=1
labelFontBold=1
onTabFontBold=0
offTabFontBold=0
seqLabel1FontBold=1
seqLabel2FontBold=1
seqLabel3FontBold=1
topMargin=0
bottomMargin=0
sideMargin=0

On each line a keyword is followed immediately by a value definition. In most cases these are colours which are defined by four values: red, green, blue and alpha.

Use alpha to determine the transparency of the element. Use 0x00 for invisible and 0xff for fully visible.

There must be no spaces before the keyword, or before or after the ‘=’. Blank lines and lines starting with ‘#’ are ignored.

Colours are defined using hexadecimal (0x00 to 0xff) or decimal (0 to 255) values.

The colour keywords are interpreted as follows.

backgroundColor - the colour of the entire plugin background. This will completely hide the background image if its alpha value is set to 0xff. Alternatively use a semi-transparent colour to modify the colours of the background image.

headerColor - the background colour of the section title bars.

divider1Color - the colour of the main section dividers.

divider2Color - the colour of the section sub-dividers.

voiceOnColor - the colour of the active voice indicators.

voiceOffColor - the colour of the inactive voice indicators.

presetButtonColor - the colour of the preset bowser arrow buttons when clicked.

logoFontColor - the colour of the Reduction title text.

titleFontColor - the colour of the section header titles.

menuFontColor - the text colour for parameter menus. Defaults to displayFontColor if not defined.

menuBackColor - the background colour for parameter menus. Defaults to displayBackColor if not defined.

displayFontColor - the text colour for switches and parameter display values.

displayBackColor - the background colour for switches and parameter displays

labelFontColor - the colour of the control knob text values and other labels.

onTabFontColor - the colour of the active lower panel selection link.

offTabFontColor - the colour of the inactive lower panel selection link.

seqLabel1FontColor - the text colour for inactive steps in the sequencer grid.

seqLabel1BackColor - the background colour for inactive steps in the sequencer grid.

seqLabel2FontColor - the text colour for active steps in the sequencer grid.

seqLabel2BackColor - the background colour for active steps in the sequencer grid.

seqLabel3FontColor - the text colour of the currently playing step in the sequencer grid.

seqLabel3BackColor - the text colour of the currently playing step in the sequencer grid.

Fonts can be set to either bold (1) or normal (0) using the following keywords:

logoFontBold

titleFontBold

displayFontBold

labelFontBold

onTabFontBold

offTabFontBold

seqLabel1FontBold

seqLabel2FontBold

seqLabel3FontBold

Setting the onTabFont to any value will remove the underscore from the tab label.

Three more keywords are used to define margins around the edges of the plugin.

topMargin - space to be added to the top of the plugin window.

bottomMargin - space to be added to the bottom of the plugin window.

sideMargin - space to be added to either side of the plugin window.

In each case the margin must be defined in units of 16 pixels. For example a top margin of 1 would add 16 pixels to the top of the plugin window.

Any margins added to the plugin must be reflected in the size of the background graphic. Add 16 pixels for each margin unit added to each edge of the plugin window.

All the resources required to present the default theme are built-in to the Reducktion plugin. Defining a new theme requires these internal resources to be overridden, any resources missing from a user-defined theme will be provided by the default theme.

This allows simple changes to be made without having to develop a complete theme. For example, an alternative knob design can be installed simply by adding a new Knob.png image to the Default folder in the Themes directory.

The theme definition file does not have to be complete; any missing values will be provided by the plugin. To change a colour in the default theme add a Theme.txt file to the Default theme directory and add new definitions for the colours you want to change.