How is the new "Themes" stuff supposed to work in Max 8.6?
There is no documentation anywhere, so I have no idea what intended behavior is.
I cannot figure out for the life of me the relationship between "Follow Live Theme" in any setting and my M4L device which gets completely re-styled every time I switch the "Color Theme".
In the past changing theme would change the colors of the things like the window frames, and Max console without affecting the patcher window. Now I find no way to change the general GUI elements independently of the patches/devices I'm working on.
I guess the "legacy" options in "Color Theme" [ default, solarized ] allow the former independence and the new ones don't?
If that's going to be the case, at least send out a notification from live.colors so anyone programming custom jsui or whatever using those colors and get the changed color notifications.
Hi Tyler,
Thank you for the inquiry and observations. We'll be working on getting this information into the documentation for a near update. In the meantime, here's something I wrote up that hopefully explains the current situation. I'll also look at making sure that live.colors registers the update whenever relevant (which might not quite be the case when changing the Max theme while operating as the Max for Live editor...see the section titled "Fighting for the Theme" below).
I hope that this is helpful and please let us know any further questions you may have or undesirable behavior that you may find.
Best regards,
Joshua
Follow Live Theme
With the introduction of Max 8.6, there is a new capability for Max to follow the Live Theme. This does so in a more complete fashion and affects all of the application interface and patcher default style colors. Previously only a handful of Max patcher colors (e.g. patcher background color, comment text color, and panel background color) would follow the live theme colors.
By default this preference is on. An individual user who wishes to retain legacy theme behavior, can turn this setting “Off”. And for Max users that wish for the last used Live theme to persist when using Max without having been launched via the Max for Live edit button, may set this preference to “Persist”.
The benefits of theme following allow for a more consistent UI experience with Live color themes when using the Max for Live editor, as well as the ability to use standard Max objects in Max for Live devices without the need to always set dynamic colors for all objects like standard max number boxes, message boxes, dials, sliders, etc. in order to be theme aware.
There are some disadvantages to the new theme following which may introduce some pain points for Max for Live device developers. If a device has made assumptions about the default Max theme colors (e.g. an always dark function object background, an always dark message box background, or an always light object box text), then the device should be updated to make use of the appropriate always dark or always light dynamic colors. For example, an always dark color in the Live theming system is LCD Background, and an always light color will be LCD Title. Generally, the LCD colors retain relative dark and light characteristics across all Standard Live themes.
Robust Theme Following
Arguably devices that relied upon the default Max colors for always dark or always light colors were already not robustly theme aware. If a user had switched the Max theme to something other than Max’s default theme, such devices could have similar color issues that are now being observed with the Follow Live Theme set to “On”. It was simply a less common incident for the average Max for Live user to change the current Max theme, and this theme dependent vulnerability went unnoticed or considered unimportant.
In order to make a device properly themed for Ableton (or Max) and robust in regard to theme changes, one of the following options should be followed for each UI element in your device (or patch):
Use the default colors for all of a given UI element’s colors. This should always follow the theme according to default theming behavior. If you require always dark or always light colors, please use appropriate dynamic colors that match these needs (see option #2).
Use appropriate dynamic colors for all colors in any given UI element. This is especially important for any foreground and background colors. This allows for robust theme following, with different rules than the standard theme following behavior.
Use fixed custom colors for all colors in any given UI element. This is especially important for any foreground and background colors. In this case, the colors will not adapt based on themes, but they will always use the authored colors and look the same under all themes.
Accessing Theme Colors from Javascript
Inside the js and 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.
Fighting for the Theme
It is generally not recommended to change the Max theme while running as the Max for Live editor with Follow Live Theme set to On or Persist. This leads to a confusing fight between custom Max themes and the Live theme being followed. We may disable the ability for setting the Max theme to take effect in this case, as it can lead to confusion and edge cases which give undesirable behavior. If you find yourself in this situation. It is recommended to quit and restart Max (or simply change the theme in Live), to restore expected behavior. In general for testing Max for Live devices with Light and Dark themes, it is recommended to have Follow Live Theme set to On and to change the theme inside Live.
Hi Joshua,
Thank you for the detailed reply and I apologize for the exasperated tone of the initial post.
Regarding the new JS theme access:
1) Will both the old style and new style (Max 8.3+ I think?) color names (e.g. lcd_bg and "LCD Background") work?
2) Will it be possible to get the Track colors from Live this way? The LOM for Tracks has a "color_index" property and it would be very convenient if that could be referenced in a similar way as lcd_bg in JS with max.getcolor().
2b) If (2) were to become true, could one get the contrasting text color for each color_index? These (and the track colors) shift a little bit with Live theme color changes and trying to approximate Live's algorithm for this has been hard.
"By default this preference is on. An individual user who wishes to retain legacy theme behavior, can turn this setting “Off” "
As stated in my original post, this only seems true for the legacy Max themes [ solarized | Max 7 | light | default ]. When "Follow Live Theme" is Off, both the patcher/device view and UI frame elements are re-colored when choosing any of the new themes (e.g. middark-garnet). This is true before and after restart of Max. I'm running Max as standalone, fwiw.
The inconsistency in behavior makes it really hard to intuit how the "Follow Live Theme" menu is intended to work. Is this just some blip as a result of new themes not being backwards compatible to Live 11 or something?
I realize this is just a draft, but this sentence kept throwing me off:
"It is generally not recommended to change the Max theme while running as the Max for Live editor with Follow Live Theme set to On or Persist."
This kept reading to me like "... while running because the" rather than "...while running in the Max for Live editor".
Cheers,
Tyler
1) Will both the old style and new style (Max 8.3+ I think?) color names (e.g. lcd_bg and "LCD Background") work?
Actually it will need to be the max theme color name, which for live colors will have a "live_" prefix before the simple id name (e.g. live_lcd_bg will work but "LCD Background"). I've updated the response above accordingly with the live_ prefix.
If you'd like to see the list of all the available theme color names you can open up any theme inside the application resources/interfaces/themes/ folder.
2) Will it be possible to get the Track colors from Live this way? The LOM for Tracks has a "color_index" property and it would be very convenient if that could be referenced in a similar way as lcd_bg in JS with max.getcolor().
I'm not 100% certain, but I believe that need to get this color via the LOM, since we don't have those colors inside of our themes.
2b) If (2) were to become true, could one get the contrasting text color for each color_index? These (and the track colors) shift a little bit with Live theme color changes and trying to approximate Live's algorithm for this has been hard.
I believe I've seen some other people have used a coll for this kind of thing with the known dark colors and using white instead of black for the text color, but the way I would probably approach this to calculate luminance and then pick dark or light accordingly.
One commonly used basic formula for perceptual brightness is luminance = (0.299*R + 0.587*G + 0.114*B), so given RGB as normalized floating point values 0.-1. I would simply test whether the calculated luminance is greater then 0.5. If so use the theme dark color or black, if not use the theme light color or white.
You of course could play with that empirically with whatever Live is doing (e.g. maybe the threshold is more or less than 0.5 for how Ableton handles this).
"By default this preference is on. An individual user who wishes to retain legacy theme behavior, can turn this setting “Off” "
As stated in my original post, this only seems true for the legacy Max themes [ solarized | Max 7 | light | default ]. When "Follow Live Theme" is Off, both the patcher/device view and UI frame elements are re-colored when choosing any of the new themes (e.g. middark-garnet). This is true before and after restart of Max. I'm running Max as standalone, fwiw.
I think what you're seeing is that the new themes actually provide some theme relative live theme colors for all of the corresponding live colors in Max themes. This enables objects like live.dial and live.number to be theme appropriate for all the new themes--i.e. light on a dark background, dark on a light background, which is expected and intentional behavior.
For all the legacy themes, there was never a dark patcher bgcolor where this is very important, and there was no work to make the default live colors in any Max theme be theme aware. The legacy themes all just had the default Live light theme colors applied to all live.* objects and the live theme colors being referenced devices (for patcher background color, panel, comment text color, etc).
Apologies if this is confusing. There was historically some provision for minimal live theme following with a default light live theme colors stored in each Max theme. The new themes take a more complete approach to the theme and live colors, even when it is not being used as a Max for Live editor.
For this case we are looking at more of a "Live objects following Max theme color" kind of scenario rather than a "Max following Live theme color" scenario, if I am understanding what you're describing here.
I hope this helps somewhat.
If you open up the respective themes in the application resources/interfaces/themes/ folder and look at colors like "live_dial_fg" and see how they are all the same live light theme color in the legacy themes, but now have Max theme relative colors for the new themes, I think this may offer additional insight into what is happening and why.
So in my mind there are 3 kinds of "Themes".
1) The colors of the Max application windows / window frames like the "Project" window below
2) Themes with which you can style UI objects in a Patcher (a Max 5 feature, IIRC)
3) Live Themes, which are like (2) but correspond to things in Live.
I like keeping (1) separate from (2)/(3).
So:
"default" theme : contrast between the Project window and the "AutoSlide-Partial…" patcher, which is following some Live theme.
"light-ice" : no contrast between the Project window and the "AutoSlide-Partial...." patcher.
My preference for the first may be a holdover from older-style many-windows-open Max development. I think based on your description I thought "Off" would give me independence between the colors showing up in the Project window and the device's window.
Thanks for pointing me to where the theme stuff lives, I'll dig around at that later.
Ah, and just saw your previous entry also regarding the color access in JS. Thank you.
Yeah, I've been storing known track colors in the past and trying to calculate which get inverse colors on the fly (the heuristic you provided isn't quite right, but neither was anything I've come up with over the years, haha...). Live's track color light/dark text changes depending on the brightness setting of the live themes. I think I'll settle with what I have already in that department, then.
My preference for the first may be a holdover from older-style many-windows-open Max development. I think based on your description I thought "Off" would give me independence between the colors showing up in the Project window and the device's window.
Yes. I hear you. In the future we hope to make available tools to allow greater user customization of themes, but as you can probably tell there are a lot of variables to consider.
"Follow Live Theme" only determines if the Max theme follows the current or last used Live theme colors (instead of any selected Max theme), and has no impact on any Max themes used on their own.
@tyler
For the contrasting text color, here is a utility patch from a colleague that might be of assistance, but still might not properly take in to account Live theme brightness setting.
<pre><code>
----------begin_max5_patcher----------
1297.3oc2ZszaaiCD9r8uBBgf8jWCwmRbOTfs4vdeulsHPVhMUI5EjjSSaQ+
uu7gjiePYSYq3MaCLBrIkmY993vYFNz+X9LuUkuHZ7.+A3NvrY+X9rY5gTCL
q6yy7xidINKpQ+Xdwk44hhVuEl4ZEuzpGW8FPbYVYc+ToI5IJW83uS6GqXcd
ZQlnUKKX2fUQsweIs3g6qEwsFaIjrzeAfBCVFh8oLFwmgnxABTCi7W5C9zqR
rbcauH8UC9y4yU+awEhnUQwO8Pc45hjAwEZr3hvYFfEtKvf9WSjkG8j.nWv9
5WRaE+SQ5mAwYoUFbBRa.IQ0O0+0xRKDwRZP+cQGRBPXvXog.rBsXFaeVPyN
X7jxB4hllnGDV8XM.1eY2K3x9mxny1uUILVrm2FKZGna2yFMLzQrfkHHiwBn
AHFM.BYVbz68GPCxDvyfIJDeUZ0GPDeOaoxOuBvGF8KFhA7YikAfx8.Gv.3v
81Qvfmf.PSJAznLuy.8zIA8Dh+tnmfudnuErBjNH1WEU7fB+op8+Vn.9nisa
kAPH9UfAFJTPx57pwsymimjEdDGuKrw7q29dYvuLcj9aUQAaNt6+hirMHbZ7
AvD3tjgLlvwICR2nJjbeRTaTGIzwBpI5xawWzMR+Scm9417jxYdR7McJlEaF
44nr0cj.DRBgb+.vm5l0v9Vk.b.I3yYXF2EIfrJg.BGh4XWD.1p.PXHGgYtH
.hcLD.YPXnKBfZU.XnODSbxBXVE.iPjKCPWDPfcHfwgPD12EIDZGCbR.MbaA
z8VojLtiMQOKRtWtyP5ueeTaac5p0slxr214TjuRjrsCiWkbGRZSZYgl.5D5
DFmaU8Cq.2.A2f.2fGW.O1nyzQj0vPsTaSH9MHD2oKxCtbyqwgbx3qvgRduU
i2ikoEfQtji8sBb7IWxIRLsaxb+qGR+M.hRGDn6TFymKKZKhx0y48m0oQYfO
VlkX4fdD9n89MGgUt7uWB9COnmxLZR+t1LfJl5+iLDkLZFBpSui88e2wPe3C
fvolfPAmIAcnKDRsI6+ZBBxlbWnQmhASw1YH1UzEZsLMd8QKdVeFpywkYS.6
pnZ42nUTeunHZUlXqBUcu2SlHRGTkM0+7HKz6LxhLojUWvoeQIKZvTRVcaC+
kkr3uAjEjsWZOSOQuNj0PMF9u+qOBtc6dc6NIwfisG.TJzpWCS2BD09uwQDS
YGxuU0M7ykIF+sBfBs5RbMYBsg5VF8sa.J09YD7Oo+OWhM8eJrR3bnpRPS8f
CeJgMs6wrporhMK.EIhWN2b3Fc3YCei1s1ZC9Yj8Zu8Iwp+XwpVN5KqYu6yS
aipw2k.ZJWWG2u912IWvqlShnoMsHpsqaD28ZeOAc893.RdTZBdBMo6s9VOU
dZRk7PrscnS0v3fCZmZnIii4V118SDT2wss78zycofB6.8ERm.5KzkEJ8Eyb
wph4jpTaRtXUoxxdZ2ucsmx5DYNeUOId6UMc.Uid6UMgaW09u8pVcpUapFdY
pNvAUqZ+zk6U4hCbu4bYZh3BcRl.MQbZgaJBTSXWss+8q1GUUroH7IxEmO5T
rPgHt5lCuTMgcUSnKTS5J9NM8wm.5S+qq3J49sIcoC0jb45xEbQXSlpNYoVv
CgkobxnppmE082HkVMxJmerrdy0iIqKqv7Q8E14UKddyMXoqg0KpNV8qLJtc
cs4zSuvLspwKuTlMoXcZWBE88m4oqJWcRqlpHCVzEuO+my+W.NPmmHA
-----------end_max5_patcher-----------
</code></pre>
Sorry, haven't closely read through all this yet, but I'm confused. Here it says -
Use fixed custom colors for all colors in any given UI element. This is especially important for any foreground and background colors. In this case, the colors will not adapt based on themes, but they will always use the authored colors and look the same under all themes.
Well, I'm trying to use fixed colors and they are changing with the theme, so that can't be right
Can you post a patch where using explicitly set fixed colors are changing with the theme?
I'll also look at making sure that live.colors registers the update whenever relevant
So I realized you can do a hack for this in a JS object that works in both Max and Live.
Just set the "color" attribute of the js box in Max to one of the dynamic color names e.g. "Device Background". Then setup a MaxobjListener for that attribute.
// This assumes the [js] box's attribute "color" is set to a Dynamic / Live Theme color name.
var l = new MaxobjListener( this.box, "color",
function (data) {
post("Theme changed!\n")
}
)This unfortunately isn't viable in jspainter (no MaxobjListener IIRC) or in jsui (no attributes settable in Max with dynamic color names). But it actually helped my cases a lot.