Styles

Rhapsodist includes a simple UI theming system. Themes are defined in a App/Styles.js file. If this file is not included Rhapsodist will fall-back to its default hardcoded styles.

This file should contain the namespace Styles within which a single array called data that contains the style definitions. No interface is provided for changing style, by default only the first style will be used.

Styles.js should be included in on init after Manifest.js and before LookAndFeel.js and Core.js.

The application of the style data is managed by Core/Includes/StyleHandler.js.

Structure

This is the basic structure of a style. You should always include an ID and mode field. The other fields are optional. Any that aren’t included will fall-back to Rhapsodist’s defaults.

namespace Styles
{
  const data = [
    {
      id: "Dark", // An ID for your style.
      mode: "dark", // Is this a "light" or "dark" palette - This alters how the style is applied
      bg: 0xff192022, // The lowest layer of your UI
      surface: 0xff151b1d, // Used by cards and levels above the background
      raised: 0xff253131, // Components like knobs, buttons, and sliders
      text: 0xfffbecca, // UI Text
      accent: 0xffd2bd96 // Accented areas like knob value arcs
    }
  ]
}

Extensions

The idea is to keep the configuration minimal and manageable. From the colours provided in the style data Rhapsodist will create a variety of shades to use in different parts of the UI.

For cases where you want more control, it’s possible to extend the style and set the properties of individual components.

For example to set the colours of pnlHeader:

const data = [
  {
    ...,
    pnlHeader: {
      bgColour: 0xff243037,
      textColour: 0x88fbecda,
      borderSize: 1,
      borderRadius: 5
    }
  }
]

Global Elements

There are certain elements that are reused through the UI. Alert windows, popups, scrollbars, etc. It is usually desirable that they all share a consistent appearance.

To handle this the style data allows you to specify some properties for those elements that will be used in their Look and Feel functions.

If the configuration options provided by the styles system is not sufficient for your needs you can instead override the Look and Feel used by the elements.

Alert Windows

const data = [
  {
    ...,
    alertWindows: {
      buttonRadius: 1,
      borderSize: 2,
      borderRadius: 1,
      labelRadius: 2
    }
  }
]

Input Box

const data = [
  {
    ...,
    inputBox: {
      bgColour: 0xff151b1d,
      borderSize: 0,
      borderRadius: 2
    }
  }
]

Popup Menus

const data = [
  {
    ...,
    popupMenu: {
      font: "regular",
      fontSize: 18,
      borderSize: 1,
      borderRadius: 2,
      textOffsetY: 0,
      iconFont: "phosphorFill",
      iconFontSize: 22,
      subMenuIcon: "e13a",
      subMenuIconFont: "phosphor",
      subMenuIconFontSize: 16,
      itemRadius: 2
    }
  }
]

Scrollbars

const data = [
  {
    ...,
    scrollbar: {
      radius: 1,
      bgColour: 0xff151b1d,
      itemColour: 0xff78d092
    }
  }
]

Toggle Switch

const data = [
  {
    ...,
    toggleSwitch: {
      borderRadius: 10,
      borderSize: 1,
      activeColour: 0xff78d092
    }
  }
]

Text Button

const data = [
  {
    ...,
    textButton: {
      borderRadius: 2,
      borderSize: 2
    }
  }
]

Peak Meter

const data = [
  {
    ...,
    peakMeter: {
      radius: 1
    }
  }
]

Table

const data = [
  {
    ...,
    table: {
      rulerColour: 0xff253131,
      pointColour: 0xffd2bd96
    }
  }
]

Value Popup

const data = [
  {
    ...,
    valuePopup: {
      fontName: "medium",
      fontSize: 20,
      borderSize: 2,
      borderRadius: 2,
      margin: 10
    }
  }
]

Cards

const data = [
  {
    ...,
    card: {
      bgColour: 0xff243037,
      borderColour: 0x0,
      textColour: Colours.white
    }
  }
]

Keyboard

There are several properties that can be set to alter the appearance of the on-screen keyboard.

const data = [
  {
    ...,
    keyboard: {
      radius: 2,
      useShadow: true,
      roundEndKeys: false,
      textColour: Colours.black
    }
  }
]

Additionally the keyboard object can be supplied with a colours object in order to define different key colours that can be referred to from the Manifest.

Each key colour object is an object itself, the key is the ID you want to use for that key colour, for example “playable”, “inactive”, “keyswitch”, etc. And the value is a two element array, the first element is the white key colour, the second is the black key colour.

const data = [
  {
    ...,
    keyboard: {
      ...,
      colours: {
        playable: [0xcce0d7c0, 0x88564d37],
        inactive: [0xdddcd7bc, 0xdd282924],
        harmonics: [0xdd2e2622, 0xaaf3e2c5]
      }
    }
  }
]

You can define any number of key colours you want and assign them to key ranges in your expansion’s Manifest.

Fonts

Rhapsodist is supplied with some text and icon fonts. These are installed in Images/Fonts/Rhapsodist.

These are used throughout the look and feel functions and you can access them too through CoreLookAndFeel.style.fonts.

The stock fonts are loaded with the following names, do not use the same names when using custom fonts.

To override these with your own you can pass them into the style configuration:

const data = [
  {
    ...,
    fonts: {
      regular: "myRegularFont",
      medium: "myMediumFont",
      semibold: "mySemiBoldFont",
      bold: "myBoldFont",
      title: "myMediumFont",
      size: 0, // A relative offset from the defaults
      titleSize: 22, // Expansion name font size
      titleOffset: 0 // Expansion name vertical offset
    }
  }
]

Noise

A stylistic element added to some expansions is a soft noise/grain texture overlay. This is enabled by default and can be disabled through the style data.

const data = [
  {
    ...,  
    useNoise: false
  }
]