Using Themes in Visio 2013

One of the new features in Visio 2013 is the expanded theming capabilities that enable you to apply a uniform look and feel to shapes within a page, and across multiple documents.

The Visio team has written a couple of post about the new features:

They’re both great resources and provide a good explanation of how theming works from a user perspective, but I wanted to understand what’s happening behind the scenes, so I thought I’d explore the new theming model a little further over the next couple of posts.

In this post I’m going to go over some of the ground covered in the first blog post above and just describe where themes have come from, how they’ve changed since 2007 and 2010 and, as an everyday user how you can apply them within your own documents.

Once the groundwork’s complete I'm then going to look at the development side of things in the following posts. There I’m going to try and uncover the underlying structure of themes, how they’re applied in the ShapeSheet and how you can extend capabilities beyond what’s available through the UI.

Before I get going I should flag up that the following is based on my own investigations of both the new file format, what I’m seeing in the UI and ShapeSheet and various specification documentation. Quite possibly I’ve missed something or not made something clear. In either case drop a comment at the bottom and we can compare notes. In the meantime I hope this adds to the knowledge out there on how the new theming features in Visio work.

Also, the language can get a little confusing here, given that styles have been around in Visio for years and the concept of style exists in a slightly different form under the new themes. So in order to be clear about which 'style' type I'm describing I'm going to try and always refer to the older Visio styles as 'master-based styles'. If I don't use that term then I just mean style in the more general sense of the word.

First a little background

Prior to Visio 2007 shape formatting was broadly applied at three levels. A shape could derive its fill, line and text properties from either:

local values defined within the shape itself
inherited values defined within shape’s master
inherited values from a master-based style

Master-based styles are also applied to master shapes and so the formatting properties are then inherited from the style, all the way down to the instance shape via the master.

You can see the master-based styles in a document in the Drawing Explorer:

Styles Basically, if you wanted to format a shape you either had to set each aspect (line, fill etc.) individually or create your own master-based style and ensure it was applied correctly. [Note – you could also use the Color Scheme add-on in 2003.]

Themes in 2007

To deal with this rather micro-level of shape formatting, Visio 2007 introduced Themes. The new feature added sets of predefined color palettes and effects, that could be applied to pages as a single theme. At this stage master-based styles were still available, but took a side-step and were hidden from the UI unless you were in Developer Mode. So conceptually a theme in Visio 2007 was just a container to hold a colors and effects pair.

Themes were descriptively named using the combination of the color palette and effects properties set pairings that they referenced. So, for example, you could apply a single cohesive theme in one click that would include the ‘Horizon’ color palette and the ‘Pillow’ effects set:

Aside from setting a single ‘paired’ theme, you could also change the color palette or effects set on an individual basis:

In addition to the built-in themes, you were able to create your own custom color palettes and effects sets yourself and these were stored as hidden masters within a document.

In either case one restriction applied, at least as far as the UI was concerned - a theme was set at page level and, although you could change individual format settings on a single shape, you couldn’t apply a different theme to single shape on an ad-hoc basis. You could get around this using the ShapeSheet, but I’ll come on to that in the next post.

Outside of the effect on the page shapes, the color picker in the ribbon would also display the respective palette based on the active selection (or the page theme if there was no selection). For example, in the following image you can see the color picker reflect the colors from the ‘Technic’ palette (in Visio 2010), which has been applied to the page.

Themes in Visio 2013

So moving right up to date, what are the changes in 2013?

Well, the concept of a theme has been expanded to include ‘Variants’ and ‘Quick Styles’.

Variants are a set of color and style variations based on the originating theme.

Quick Styles are a means of applying a predefined color and style to a single shape (or selection).

In contrast to the previous themes model, which was largely a pairing of a single color palette and a single effects set, the new model sees a theme act as a container for a range of color palettes and a range of effects.

At the core of a theme is a set of line, fill, font and effect styles each divided into six levels:

Selecting any one of a theme’s four Variants, sets a single color palette and single style-set on the applied page and this, in turn, determines which quick styles are then made available. For example selecting the third variant in a theme will give you the third palette and third style set:

Once a single palette and style has been set or, taking the default, which is the first Variant, you can then apply a specific Quick Style to a single shape via the shape’s context menu or the Shape Styles group on the Home tab.

Using this drop down produces two options – you can either set a Variant Style item or a Theme Style item.

Setting one of the four Variant Styles sets a predefined Line, Fill, Font and Effect style-set against one of the first four colors in the ‘active’ palette.

Alternatively, setting one of the Theme Styles allows you to choose from a combination of one of the style-sets and seven individual colors from the ‘active’ palette.

One other aspect of the new theming functionality is Embellishment. This is a feature that only applies to particular shape types. From the current built-in shapes the documentation identifies callouts, containers, timelines, and organization chart shapes as those affected.

Broadly, shapes that make use of the embellishment feature can react in different ways, for example, by changing their geometry, shape effects, text etc. – in fact any aspect of a shapes anatomy that the designer has chosen. The idea being that a shape with a high level of embellishment will look more detailed and have higher contrast than one with a low level of embellishment.

Mix 'n match and custom colors

Although the top level ribbon controls allow you to set color, effect and connector styles on a per theme basis (on a page), you can also dig a little deeper, via the dropdown on the Variants Gallery, and begin to mix and match these three theme components to create your own custom styles.

To do this you have to ensure that you've selected an initial theme as your base, and you can then adapt the three components as required. Bear in mind that while the Themes gallery control in the ribbon displays the active themes that are being used in the document, your new 'modified' theme will retain its original name, which might catch you out at first glance.

For example, if you start out by applying the 'Linear' theme to your page, you'll see that each of the color, effect and connector components of the same name are active in their respective dropdown lists. If you then change the effect to 'Clouds' and the colors to 'Parallel', the applied theme (seen under the This Document part of the Themes gallery) will still be called 'Linear'. This is now a different 'Linear' to the original built-in one that you started with.

If you find that the built-in colors aren't quite what you're after or you need to match a corporate brand style guide then you're free to create your own custom theme colors. This works in a very similar way to 2007/10, where you are presented with a dialog to help you select your palette and this information is then stored in a hidden master within your document.

Visio2013CustomThemeColors

If you do decide to use a custom color palette, then bear in mind that you'll then lose the ability to change variants, but then presumably by using a custom palette you're trying to lock things down in any case.

One last point on theme customization, if you're familiar with themes in 2007/10, is that the creation of custom effects (in a similar manner to color) is no longer supported via the UI.

Next stop – the ShapeSheet

So I think that just about wraps things up for this post. I hope you’ve got a clearer picture of how themes are structured in Visio 2013. In the next post I’m going to move on to look at what’s happening in the ShapeSheet and what impact the new themes model has on designing and building your own shapes.