Designing Shapes for Use with Themes in Visio 2007
Tim Davenport, Microsoft Corporation
August 2006
Applies to: Microsoft Office Visio 2007
Summary: Learn about the new Theme feature in Microsoft Office Visio 2007, how it works, and how it affects and improves your ability to design shapes. (11 printed pages)
Contents
Overview of Themes in Visio 2007
How Themes Differ from Color Schemes
How Themes Work
Protecting Shapes from Themes
Designing Special Theme Behaviors in Shapes
Anatomy of a Shape to Which You Can Apply Themes
Conclusion
Additional Resources
Overview of Themes in Visio 2007
This article describes how the Theme feature works (particularly in the Visio ShapeSheet spreadsheet) and how you can design shapes to take advantage of it. This article assumes you have an understanding of the ShapeSheet spreadsheet and shape development.
The new Theme feature in Microsoft Office Visio 2007 represents a significant change in the way Visio drawings are designed and formatted. Because it is implemented differently from similar features in previous versions of Visio, it requires some changes in the way you design and build Visio shapes.
The Theme feature in Visio 2007 lets you apply consistent, professionally designed color schemes and formatting effects to your drawings with one click. You can choose from the built-in set of themes or create your own custom themes. Themes are displayed in the Themes task pane in the Visio user interface (UI). To open the Themes task pane, on the Format menu, click Theme, or click the Theme button on the Formatting toolbar.
Themes are divided into Theme Colors and Theme Effects, which control the following formatting attributes, respectively:
Theme Colors
Attributes of theme colors:
Text
Line
Connector
Fill
Fill pattern
Shadow
Accents 1–5
Background
Theme Effects
Attributes of theme effects:
Font
Line pattern, weight, transparency, and rounding
Fill pattern and transparency
Shadow style, transparency, offset, magnification, and direction
Connector pattern, weight, transparency, rounding, and arrowhead style and size
You can apply a theme to your drawing by clicking a thumbnail in the Theme - Colors task pane or theTheme - Effects task pane, or by right-clicking a thumbnail and then clicking either Apply to All Pages or Apply to Current Page.
How Themes Differ from Color Schemes
In earlier versions of Visio, the Color Schemes feature provided users a limited ability to apply formatting themes in templates that were designed to support the feature. To apply Color Schemes to shapes, shape developers had to assign a style to the shapes, selected from a set of hidden Color Scheme styles. When users then applied a color scheme to the drawing, Visio changed the colors used in the color-scheme styles so that any shapes that used styles based on them would also change color.
The Theme feature in Visio 2007 uses a completely different approach. A shape does not need to have a style assigned to it to support themes. In fact, the feature does not use styles at all. You can apply themes to any shape or group of subshapes, unless they are protected in some way from themes or formatting.
If you draw a rectangle by using the Rectangle tool and then apply theme colors and theme effects to the page, the rectangle immediately takes on all the applicable theme-formatting attributes listed above, and no further action is required on your part. In effect, applying a theme works the same way as applying manual formatting.
How Themes Work
The THEME Function
The Theme feature is enabled primarily by the new THEME ShapeSheet function that gets the current theme's format settings. If you apply a theme to the page, Visio inserts the THEME function in a formula in all the formatting cells controlled by the Theme feature.
The THEME function takes the following strings:
Table 1. THEME function strings: Theme Colors
Theme Attribute |
String |
|---|---|
Text |
"TextColor" |
Line |
"LineColor" |
Connector |
"ConnectorColor" |
Fill |
"FillColor" |
Fill pattern |
"FillColor2" |
Shadow color |
"ShadowColor" |
Accent 1 |
"AccentColor" |
Accent 2 |
"AccentColor2" |
Accent 3 |
"AccentColor3" |
Accent 4 |
"AccentColor4" |
Accent 5 |
"AccentColor5" |
Background |
"BackgroundColor" |
Table 2. THEME function strings: Theme Effects
Theme Attribute |
String |
|---|---|
Latin font |
"LatinFont" |
Asian font |
"AsianFont" |
Complex Script font |
"ComplexFont" |
Line pattern |
"LinePattern" |
Line weight |
"LineWeight" |
Line transparency |
"LineTransparency" |
Line rounding |
"LineRounding" |
Fill pattern |
"FillPattern" |
Fill transparency |
"FillTransparency" |
Shadow style |
"ShadowStyle" |
Shadow transparency |
"ShadowTransparency" |
Shadow X offset |
"ShadowXOffset" |
Shadow Y offset |
"ShadowYOffset" |
Shadow magnification |
"ShadowMagnification" |
Shadow direction |
"ShadowDirection" |
Connector pattern |
"ConnectorPattern" |
Connector weight |
"ConnectorWeight" |
Connector transparency |
"ConnectorTransparency" |
Connector rounding |
"ConnectorRounding" |
Connector arrow begin style |
"ConnectorBegin" |
Connector arrow end style |
"ConnectorEnd" |
Connector arrow begin size |
"ConnectorBeginSize" |
Connector arrow end size |
"ConnectorEndSize" |
Theme User Cells
When you apply a built-in theme to a page, Visio inserts a user-defined cell into the ShapeSheet to specify the theme that you applied. Typical values for these cells are shown in the following table.
Table 3. User-defined cells for built-in themes
User-Defined Cell |
Value |
|---|---|
User.msvThemeColors |
7 |
User.msvThemeEffects |
1 |
The cell value is an integer that represents the currently applied theme in the built-in set included with Visio. In this way, the THEME function determines which theme is applied so that it can get the theme's format settings (which are stored internally in Visio) and apply them to the shapes on the page.
Visio stores custom themes as hidden masters in the current document and refers to them by GUID in the user-defined cells. Typical values are shown in the following table.
Table 4. User-defined cells for custom themes
User-Defined Cell |
Value |
|---|---|
User.msvThemeColors |
USE({04719521-0003-0000-8E40-00608CF305B2}) |
User.msvThemeEffects |
USE({04719F14-0004-0000-8E40-00608CF305B2}) |
ShapeSheet Cells Affected by Themes
When you apply a theme, Visio attempts to set the following ShapeSheet cell values by inserting the THEME function along with the strings listed in Table 1 and Table 2.
Table 5. ShapeSheet Cells Set by Theme Colors
Section |
Cell |
|---|---|
Line Format |
LineColor |
Fill Format |
FillForegnd |
Fill Format |
FillBkgnd |
Fill Format |
ShdwForegnd |
Fill Format |
ShdwBkgnd |
Character |
Color |
Table 6. ShapeSheet Cells Set by Theme Effects
Section |
Cell |
|---|---|
Line Format |
LinePattern |
Line Format |
LineWeight |
Line Format |
LineColorTrans |
Line Format |
Rounding |
Fill Format |
FillForegndTrans |
Fill Format |
FillBkgndTrans |
Fill Format |
FillPattern |
Fill Format |
ShdwForegndTrans |
Fill Format |
ShdwPattern |
Fill Format |
ShapeShdwOffsetX |
Fill Format |
ShapeShdwOffsetY |
Fill Format |
ShapeShdwType |
Fill Format |
ShapeShdwObliqueAngle |
Fill Format |
ShapeShdwScaleFactor |
Character |
Font |
Character |
AsianFont |
Character |
ComplexScriptFont |
Protecting Shapes from Themes
Some of the shapes included with Visio 2007 do not require you to do any additional work to make them look good when you apply a theme to them. For example, the Process shape on the Basic Flowchart stencil is a simple rectangle that that looks good with all of the theme's default formatting.
In some cases, however, it may be necessary to protect certain parts of a shape from themes or to prevent application of themes to the shape altogether. For example, allowing a theme's line-rounding formatting to apply to the PC shape is probably not appropriate.
Figure 1. PC shape before and after line rounding is applied
.gif "PC shape")
You can use the following ShapeSheet functions and cells to protect a shape or subshape from themes.
GUARD Function
If a ShapeSheet formatting cell contains a formula that is wrapped in the GUARD function, it is not overwritten by themes. GUARD also prevents the user from applying manual formatting (that is, using the various commands on the Format menu), so this method is appropriate only when it is unlikely that the user would want to change the formatting.
THEMEGUARD Function
The new THEMEGUARD function protects a formula from being overwritten by themes but not from manual formatting. You can also use it to design special theme behavior into a shape, such as taking a specific accent color or a tint or shade of another color. There is more detail about using this function later in this article.
LockFormat Cell (Protection Section)
If the LockFormat cell in the Protection section is set to 1 (TRUE) for a shape, any themes applied to the page are not applied to that shape, and all of its formatting cells remain unaffected. As is the case with using the GUARD function, setting the LockFormat cell value to TRUE also prevents users from formatting the shape manually.
LockThemeColors and LockThemeEffects Cells (Protection Section)
If you set the value of the LockThemeColors cell or the LockThemeEffects cell in the Protection section to 1 (TRUE) for a shape, Visio does not apply theme colors or effects to the shape. However, users can still format the shape manually. Setting both of these cell values to 1 is the best way to prevent application of themes to shapes. For example, the Stop shape on the Transportation Shapes stencil has both cell values set to 1 because it represents a traffic stop sign. A traffic stop sign has a specific shape, therefore it is inappropriate to change its formatting when you apply a theme to the page.
Designing Special Theme Behaviors in Shapes
In the simplest cases, if you apply themes, Visio inserts default formulas into ShapeSheet cells and shapes look good without requiring any special treatment. However, more complex shapes require special formulas to make them take certain, nondefault aspects of the theme, such as an accent color, or to disregard some (or all) of the theme's formatting.
Treatment of Connectors
Because connectors (such as the Dynamic Connector shape included on many stencils and connectors drawn with the Connector tool) are themed separately from regular lines, they require special treatment. Connector masters are designed with the formulas already present in the ShapeSheet (instead of being inserted when the theme is applied), and the begin/end arrow style and size cells are also affected.
Table 7. Connector formulas
ShapeSheet Section |
Cell |
Formula |
|---|---|---|
Line Format (for a connector) |
LinePattern |
THEME("ConnectorPattern") |
Line Format (for a connector) |
LineWeight |
THEME("ConnectorWeight") |
Line Format (for a connector) |
LineColor |
THEME("ConnectorColor") |
Line Format (for a connector) |
LineColorTrans |
THEME("ConnectorTransparency") |
Line Format (for a connector) |
Rounding |
THEME("ConnectorRounding") |
Line Format (for a connector) |
BeginArrow |
THEME("ConnectorBegin") |
Line Format (for a connector) |
EndArrow |
THEME("ConnectorEnd") |
Line Format (for a connector) |
BeginArrowSize |
THEME("ConnectorBeginSize") |
Line Format (for a connector) |
EndArrowSize |
THEME("ConnectorEndSize") |
Accent Colors
By default, if you apply a theme, shapes take on the theme's main fill color, line color, and text color. However, for more color variety or to distinguish parts of a drawing, you can apply an accent color to a shape instead. Accent colors are a set of additional, complementary colors that can be applied by users or predesigned into shapes.
You can apply any of the accent colors to a shape by using the Text Color, LineColor, and Fill Color buttons on the Formatting toolbar (or the equivalent Text, Line, and Fill commands on the Format menu). Then, as you apply different themes, the shapes retain the same accent color, no matter which theme you apply. A shape that has Accent 5 assigned in the Solstice theme still has Accent 5 assigned to it if the user applies the Apex theme (but it is the Apex theme's version of Accent 5). The following is the ShapeSheet formula that Visio inserts if you apply accent colors to shapes manually:
THEMEGUARD(THEME("AccentColor5"))
Usually, the shapes included with Visio 2007 use the main colors defined in the theme, but some shapes have formulas that specify that they take Accent 1, Accent 2, or Accent 3 when a theme is applied. (Accent 4 and Accent 5 are used only by the Data Graphics feature.) Calendar, Block Diagram, Gantt Chart, Marketing Charts and Diagrams, Timeline, and Value Stream Map are examples of templates whose shapes make use of accent colors.
CELLISTHEMED Function
To design shapes that behave one way when themed and another way when not themed, you can use the new CELLISTHEMED function. In its most common use, the function allows a shape to take an accent color when themed and to take some default RGB color when no theme is applied.
A good way to see how CELLISTHEMED works is to look at the Circular Arrows shape from the Marketing Diagrams stencil in Visio 2007. The first arrow uses the main fill color from the theme but the others use accent colors. Otherwise, the entire group would take the same fill color.
Figure 2. "Circular Arrows" shape before and after a theme is applied
.gif "Circular Arrows shape before/after theme")
Each of the accented arrows uses CELLISTHEMED in a formula that makes it take an accent color when a theme is applied and a default RGB color when no theme is applied. For example, Table 8 shows the formula that is in the FillForegnd cell for the Accent 3 arrow shown in Figure 2.
Table 8. CELLISTHEMED formula example
State |
Formula |
|---|---|
No theme applied |
THEMEGUARD(IF(CELLISTHEMED(FALSE),SETATREFEXPR(THEME("AccentColor3")),SETATREFEXPR(RGB(85,255,85)))) |
Theme applied |
THEMEGUARD(IF(CELLISTHEMED(TRUE),SETATREFEXPR (THEME("AccentColor3")),SETATREFEXPR(RGB(85,255,85)))) |
This formula causes the arrow to take the color represented by RGB values 85, 255, 85 when no theme is applied and Accent 3 when the shape is themed. Both the TRUE and FALSE results of CELLISTHEMED are wrapped with SETATREFEXPR, a function that provides a place to store default or locally applied formatting values and that provides better interaction with colors assigned manually by the user. The entire formula must be wrapped in the THEMEGUARD function. Otherwise, Visio replaces the formula with the default THEME("FillColor").
Color-Related Functions
TINT and SHADE
Together, the new TINT function and the new SHADE function provide a way to create a color that is a tint or shade of another color. They adjust the luminosity (the L in the HSL color model; also known as lightness or luminance) of the color by the integer specified in the cell formula, using the HSL scale of 0–240.
For example, the Circular Arrows shape in Figure 2 can be designed to use tints of the theme's fill color, rather than accent colors, to differentiate the arrows. Figure 3 shows the arrows with formulas that tint—that is, that increase the luminosity of—the theme's fill color in increments of 30.
Figure 3. Circular Arrows shape using TINT
.gif "Circular Arrows shape using TINT")
The SHADE function works the same way, except that it decreases the luminosity of the color.
BLEND
You can use the BLEND function to create some interesting coloring effects in shapes. BLEND creates a color that corresponds to a point on the spectrum between one color and another. The BLEND function takes a floating point value from 0 to 1 inclusive, with 0 being the first color and 1 being the second.
In Figure 4, the colors in the Circular Arrows shape are a blend between the theme's fill color and its Accent 3 color.
Figure 4. Circular Arrows shape using BLEND
.gif "Circular Arrows shape using BLEND")
TONE
The TONE function is not widely used in the shapes included with Visio 2007, but it is available for your shape design. It is similar to SHADE, but instead of decreasing the luminosity, it decreases the saturation (the S in HSL). Like SHADE, it takes an integer from 0–240. Figure 5 shows how it can be used in the Circular Arrows example.
Figure 5. Circular Arrows shape using TONE
.gif "Circular Arrows shape using TONE")
HUEDIFF, SATDIFF, and LUMDIFF
The HUEDIFF, SATDIFF, and LUMDIFF functions allow you to apply a color based on the difference in hue, saturation, or luminosity between two other colors. For example, LUMDIFF is used to set the fill-pattern color (the FillBkgnd cell value) on shapes that have accent colors assigned to them, to ensure that they look consistent with shapes that have the main fill color assigned.
The Inventory shape in Value Stream Map, which uses Accent 1 as its fill when it is themed, is an example of the use of LUMDIFF. It has this formula in its FillBkgnd cell:
THEMEGUARD(SHADE(FillForegnd,LUMDIFF(THEME("FillColor"),THEME("FillColor2"))))
Figure 6. Inventory shape using LUMDIFF
.gif "Inventory shape using LUMDIFF")
The LUMDIFF formula shades the FillForegnd color by the same amount of luminosity difference there is between the currently applied theme's fill color ("FillColor") and its fill pattern color ("FillColor2").
Anatomy of a Shape to Which You Can Apply Themes
The main principle to remember as you design shapes for themes is that if they look good when users apply color or other formatting to them manually, they look good when users apply themes. For example, the shapes on the Servers stencil are designed in such a way that users can apply a fill color, line color, or shadow to them without breaking their special isometric appearance.
Figure 7, the Proxy Server shape on the Servers stencil, is a good example of a shape that uses many of the concepts described in this article to maintain a pleasing appearance when it is themed or formatted. As with the other shapes on the Servers stencil, the design requirements were these:
Users can apply a fill color, line color, or shadow to the shape by using the formatting commands on the Format menu or on one of the formatting toolbars, while maintaining the shape's appearance.
The shape is a default tan color when there is no theme applied and Accent 2 when a theme is applied.
The shape is protected from formatting that breaks its appearance, such as line rounding.
Formatting is applied selectively to parts of the shape, where appropriate.
Figure 7. The Proxy Server shape
.gif "The Proxy Server shape")
Conclusion
The Theme feature in Visio 2007 provides a powerful new way for you to format your drawings quickly and easily. It does not require that you assign a special style to shapes to which you want to apply themes. By using the information presented in this article, you can design shapes that take advantage of the level of theme functionality you feel is appropriate for each shape you build.
Additional Resources
For more information, see the following resources: