<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="_c74_vig.xsl" type="text/xsl"?>
<vignette name="Themes" package="Max" rankfactor="2">
  <h1>
	Themes
	</h1>

  <p>
    Themes define a look and feel for the whole Max application, including icons, toolbars, objects, patchcords, and the patcher background. 
  </p>

  <h2> Choosing a Theme </h2>

  <p>
    You can change the colors of the Max interface by choosing a new theme. In the application preferences <i>(Max &gt; Preferences...)</i>, under the  <i>Interface</i> the <i>Color Theme</i> option lets you select your preferred theme.
  </p>

  <p>
    <img src="images/themes_001.png"/>
  </p>

  <p>
    In addition to the four default themes: <i>default</i>, <i>light</i>, <i>max7</i>, and <i>solarized</i>, 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 <i>Follow Live Theme</i> setting (which is on by default). See <link module="core" name="themes_and_max_for_live" type="vignette">Robust Theme Following </link> for more details.
  </p>

  <p>
    <img src="images/themes_002.png"/>
  </p>

  <h2>
    Accessing Theme Colors from JavaScript
  </h2>
  <p>
    Inside a <o>js</o> or <o>jsui</o> object, you can access all theme colors using the <i>max.getcolor()</i> function. For example <i>max.getcolor(“live_lcd_bg”)</i> will return the color associated with <i>LCD Background</i> color. It is generally recommended to query this color in your <i>paint</i> method so that it will always update with the theme color as it is changed. The list of colors you can query from <i>max.getcolor</i> is all the colors inside the Max theme files (found in the <i>application resources/interfaces/themes/</i> folder)
  </p>

  <h2>
    Custom Themes
  </h2>

  <p>
    If you want to create a custom Max theme, it must be part of a Max <link module="core" name="packages" type="vignette">Package</link>. Create a custom theme by creating a <i>.maxtheme</i> file, then placing that file in the <i>interfaces/themes</i> directory inside your package folder. Max will automatically make your custom theme available alongside the built-in themes in the application preferences.
  </p>

  <p>
    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 <i>Contents &gt; Resources &gt; C74 &gt; interfaces &gt; themes</i>. On Windows these can be found in <i>Program Files &gt; Cycling '74 &gt; Max 8 &gt; Resources &gt; interfaces &gt; themes</i>.
  </p>

  <h2>
    Theme Format
  </h2>

  <p>
    A Max theme is a set of <link module="core" name="dynamic_colors" type="vignette">Dynamic Colors</link> combined with default values for the current <link module="core" name="styles" type="vignette">Style</link>. Together, these two sets of values define colors for the Max application as well as Max objects.
  </p>

  <p>
    The <i>.maxtheme</i> file is simply a JSON file with two properties, <i>colors</i> and <i>styledefaults</i>. The <i>colors</i> property defines the values of <link module="core" name="dynamic_colors" type="vignette">Dynamic Colors</link> 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.
  </p>

  <code>
  // 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
    ]
  }
  </code>

  <p>
    The <i>styledefaults</i> are similar, but work with the current <link module="core" name="styles" type="vignette">Style</link> to determine the final color of an object. These specify the default color of an object if no other color is defined.
  </p>

  <code>
    // 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
      }
    }
  </code>

  <p>
    If an object needs to decide what color to draw, it first looks to its defined attibutes. For example, if a <o>button</o> object needs to draw its background, it looks to its <i>bgcolor</i> 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 <i>styledefaults</i>.
  </p>
</vignette>
