Visio 2013 Themes in the ShapeSheet (Part 2)

So now you know, from the previous post, that there’s no smoke and mirrors here - it’s just general formatting values being calculated in the ShapeSheet. With this knowledge I’m now going to move on and look at what happens in the ShapeSheet, when you start clicking things in the UI.

Themes

First off, selecting a theme in the ribbon gallery fires its index value into the active page’s Theme Properties section. ConnectorSchemeIndex, EffectSchemeIndex, ColorSchemeIndex, FontSchemeIndex and ThemeIndex all receive the same value for the theme (40 for ‘Parallel’ in the example below):

There are a number of settings that affect the way in which a theme is applied. I’m going to call this ‘theme scope’ for want of an official term. Broadly, you can control whether subsequently dropped shapes adopt the active theme and also whether a theme is applied to all pages or just the active page. None of these settings have corresponding ShapeSheet cells, but some of them can be accessed in code (not in the ShapeSheet) via the DoCmd method:

It’s worth noting that although there are a number of theme related DoCmds, the majority rely on a particular ribbon control item having focus, which you generally have no control over.

Variants

Once a theme has been selected the Variants ribbon gallery becomes available from where you can select one of the four options. This is a zero based index and writes the same value to both the VariationColorIndex and VariationStyleIndex.

Embellishment

The final cell in the Theme Properties section holds the EmbellishmentIndex. This cell is populated either by the drop down in the Variants group of the Design ribbon tab (as per the image below) or as it is pre-defined within one of the Theme’s four Variants.

It takes one of four values:

0 = Automatic
1 = Low
2 = Medium
3 = High

As I mentioned in the previous post, Embellishment is only used by particular shapes within the built in set (callouts, containers, timelines, and organization chart) and if you hunt around in those shapes you can see some of the ways in which they are used. For example, if you look at the ‘Waves’ container shape, you can see that changing the Embellishment level creates a different look and feel depending on the index applied:

This shape is a group shape and each wave is a separate sub-shape. Embellishment is used to vary the visibility, line pattern, fill and transparency of the sub-shapes depending on the index value that’s derived from the group.

Here’s a couple of samples of the formulae involved:

In both of the above cases the Embellishment level is retrieved using the THEMEPROP function either via a containing cell (User.Embellishment) or directly, as in the second instance.

Other examples include the level of corner rounding on some of the callout shapes, fill gradient stop transparency levels in some Org Chart shapes and text styling (weight and case) in some of the timeline shapes. The point here is that it’s up to the designer of the shape to determine how you interpret the effect that a change in the Embellishment index affects your shapes.

Needless to say it is also your responsibility to ensure that your changes match the expectation of the user – ie a shape with a low Embellishment level will be less vivid, and an all together ‘quieter’ shape than one set to high.

QuickStyles

Once the Theme and Variant has been set on the page, you are then free set the QuickStyle formatting on individual shapes. This is done from the Shape Styles group of the Home ribbon tab and directly corresponds with the QuickStyle ShapeSheet section.

You can select from either the Variant Styles or Theme Styles and this will set all of the cells apart from QuickStyleType and QuickStyleVariation.

Setting a Variant Style sets all of the cells (with the above exceptions) to a value of 100 to 103, while setting a Theme Style sets a style index of 1 to 6 on the matrix cells, and a color index of 100 to 106 on the color cells. In the example below you can see the effect of selecting the second column and row of the Theme Styles:

The Theme Style styles are somewhat similar to Embellishment in as much as they’re on a scale from light to heavy and, as described in the previous post, each one has a different name reflecting their intent:

1 = Subtle
2 = Refined
3 = Balanced
4 = Moderate
5 = Focused
6 = Intense

Theme Protection

Given that the QuickStyles menu is something you use to set the formatting on an individual shape (as opposed to the page) it is also where you can opt out of, or remove theming from an individual shape.

Unchecking the ‘Allow Themes’ option (see above image) takes the shape out of page level theming and has two effects in the ShapeSheet:

the Theme Properties section is made local with the actual theme index values (rather than the inherited version of 65534)
all theme protection cells in the Protection section are set to true (also becoming local)

Rechecking the ‘Allow Themes’ option simply sets the theme protection cells to false, but they remain local values. The Theme Properties section is unchanged.

Any subsequent changes to the the page’s theme will return the above shape’s Theme Properties section cells to an inherited value (65534).

Theme protection in Visio 2013 has become a little more nuanced mirroring the additional components that make up a theme. So theme based Protection section cells are now as follows:

The final item in the QuickStyles menu allows you to remove an applied theme from an individual shape. Clicking this item sets all of the Theme Properties section cells to 0. This results in all values being derived from the ‘No Style’ master-based style.

Non-UI cells

There are two remaining cells in the Quick Style section that do not appear to have access from the UI and that QuickStyleType and QuickStyleVariation:

The QuickStyleType cell controls whether the above matrix cells refer to an effect scheme or a connector scheme. The values are:

0 - auto
1 - 1D (effect scheme)
2 - 2D (effect scheme)
3 - connector (connector scheme)

Aside from auto, the value ignores whether the target shape is actually a connector or not. This basically enables you to force a shape to take on connector type styling even when it’s not a connector and vice versa. Generally you’d leave this on auto unless you had a good reason for doing otherwise.

The QuickStyleVariation allows Visio to coerce the Text, Line and Fill colors of a theme so that they maintain reasonable contrast against a background theme color. The cell really just changes how the THEMEVAL function evaluates “TextColor", "LineColor" and "FillColor" theme properties. The cell allows you to opt in to one or more of the behaviours and the index values are as follows:

0 = Inactive (no change)
1 = Inactive (no change)
2 = Text – Change ‘TextColor’ theme property to be visible against the theme ‘BackgroundColor’
4 = Line – Change ‘LineColor’ theme property to be visible against the theme ‘BackgroundColor’
8 = Fill – Change ‘FillColor’ theme property to be visible against the theme ‘BackgroundColor’

Here’s an example of the QuickStyleVariation cell at work. First of all you get the original shape with its cell set to zero. The other shapes demonstrate how the text (2), line (4) and fill (8) values change the way in which the theme properties are evaluated by the THEMEVAL function. The final shape on the right shows that you can add the flags together to get a combination of the three:

The coercion basically looks at the difference in luminance of the theme’s BackgroundColor and one of the three other properties. I’ve jotted down some pseudo code to try and explain how I think this works based on the file format spec, in this case, for ‘LineColor’:

Both text and fill work on a similar basis, but for text, the final evaluation of luminance difference between ‘BackgroundColor and FillColor’, and, ‘BackgroundColor and LineColor’, also considers ‘BackgroundColor and TextColor’ – The one with the greatest difference wins the day.

So that’s how the ShapeSheet receives its values from the UI (plus the above two cells). In the next post I’m going to look at custom color themes.