Themes

Themes define a look and feel for the whole Max application, including icons, toolbars, objects, patchcords, and the patcher background.

Choosing a Theme

You can change the colors of the Max interface by choosing a new theme. In the application preferences (Max > Preferences...), under the Interface the Color Theme option lets you select your preferred theme.

In addition to the four default themes: default, light, max7, and solarized, Max 8.6 includes a large set of new themes, including all-dark themes. With more themes available, if you intend to share your patches, then it's important to make your patchers theme-aware. Theme-aware patches will update their colors to reflect the theming of the host application. In the context of Live, that means using the Follow Live Theme setting (which is on by default). See Robust Theme Following for more details.

Accessing Theme Colors from JavaScript

Inside a js or jsui object, you can access all theme colors using the max.getcolor() function. For example max.getcolor(“live_lcd_bg”) will return the color associated with LCD Background color. It is generally recommended to query this color in your paint method so that it will always update with the theme color as it is changed. The list of colors you can query from max.getcolor is all the colors inside the Max theme files (found in the application resources/interfaces/themes/ folder)

Custom Themes

If you want to create a custom Max theme, it must be part of a Max Package. Create a custom theme by creating a .maxtheme file, then placing that file in the interfaces/themes directory inside your package folder. Max will automatically make your custom theme available alongside the built-in themes in the application preferences.

The easiest way to make a custom theme is to start from one of the existing themes. On macOS these can be found in the application bundle—right-click on the Max application, select "Show Package Contents" and navigate to Contents > Resources > C74 > interfaces > themes. On Windows these can be found in Program Files > Cycling '74 > Max 8 > Resources > interfaces > themes.

Theme Format

A Max theme is a set of Dynamic Colors combined with default values for the current Style. Together, these two sets of values define colors for the Max application as well as Max objects.

The .maxtheme file is simply a JSON file with two properties, colors and styledefaults. The colors property defines the values of Dynamic Colors within that theme. This is a dictionary that maps identifiers to specific color values. When the application needs to know what color to draw a UI element, it can look in this dictionary to see what color would be consistent with the current theme.

// Example of the "colors" section of a .maxtheme file
  {
    "colors" : [
      {
        "id" : "alignmentguide", // The internal name of the color
        "oncolor" : [ 0.737255, 0.466667, 0.219608, 1.0 ], // RGBA format
        "category" : "Patching",
        "label" : "Alignment Guide" // The display name of the color
      },

      {
        "id" : "assistance_background",
        "oncolor" : [ 0.843137, 0.835294, 0.796078, 0.94 ],
        "category" : "Patching",
        "label" : "Assistance Background"
      }

      // ... more colors here
    ]
  }

The styledefaults are similar, but work with the current Style to determine the final color of an object. These specify the default color of an object if no other color is defined.

// Exmaple of the "styledefaults" section of a .maxtheme file
    {
      "styledefaults" : 	{
        "bgcolor" : [ 0.2, 0.2, 0.2, 1 ],
        "color" : [ 0.807843, 0.898039, 0.909804, 1 ],
        "elementcolor" : [ 0.34902, 0.34902, 0.34902, 1 ],
        "accentcolor" : [ 0.501961, 0.501961, 0.501961, 1 ],

        // ... more colors here
      }
    }

If an object needs to decide what color to draw, it first looks to its defined attibutes. For example, if a button object needs to draw its background, it looks to its bgcolor attribute. If the user has not defined a custom value for this color, it then looks at the object's style for a value for that color. If the style doesn't contain a value for that attribute, the object checks the patcher's style next. If the patcher doesn't have a style, or if the style doesn't define a color for the given attribute name, then the object will fetch the value from the current global theme—this is what is specified by styledefaults.