Walkthrough: Creating a Theme Extension

This walkthrough demonstrates how to create a theme extension for Visual Studio LightSwitch. A theme extension defines a color and font palette for the LightSwitch shell.

To create a theme extension, you must do the following:

  1. Create a theme extension project.

  2. Specify the display name and description.

  3. Define the theme.

  4. Test the theme extension.

  • Visual Studio Professional 2012

  • Visual Studio 2012 SDK

  • LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012

The first step is to create a project and add a LightSwitch Theme template.

To create an extension project

  1. On the menu bar in Visual Studio, choose File, New Project.

  2. In the New Project dialog box, select the LightSwitch node, and then select LightSwitch Extension Library (Visual Basic) or LightSwitch Extension Library (C#).

  3. In the Name field, type TestThemeExtension as the name for your extension library. This name will appear on the Extensions tab of the LightSwitch Application Designer.

  4. Choose the OK button to create a solution that contains the seven projects that are required for the extension.

To choose an extension type

  1. In Solution Explorer, select the TestThemeExtension.Lspkg project.

  2. On the menu bar, choose Project, Add New Item.

  3. In the Add New Item dialog box, select LightSwitch Theme.

  4. In the Name field, enter TestTheme as the name for your extension.

  5. Choose the OK button. Files will be added to several projects in your solution.

The default name for your theme is “TestTheme” and the default description is “TestTheme description.” Both of these will appear in the Application Designer at design time. Therefore, you will change them to something more meaningful.

To specify the display name and description

  1. In Solution Explorer, choose the TestThemeExtension.Common project.

  2. Expand the Metadata and Themes nodes, and open the TestTheme.lsml file.

  3. In the Theme element, replace the DisplayName value with Test Theme, and replace the Description value with This is my first try at creating a theme. As follows.

    <Theme Name="TestTheme">
          <DisplayName Value="Test Theme"/> 
          <Description Value="This is my first try at creating a theme."/>

    These are the values that developers will see when they select your theme on the General Properties tab of the application designer.

At this point you have created a theme, and you can test it in a LightSwitch application.

The LightSwitch Theme project template added a TestTheme.xaml file to the TestThemeExtension.Client project. This file contains the resource directory for the LightSwitch shell; the default values and styles define the appearance of the LightSwitch Blue Theme (Default) theme that is the default for LightSwitch applications. You define your own theme by modifying some or all of the values in this file. For more information on the available styles, see Control Elements for LightSwitch Themes.

To define the theme

  1. In Solution Explorer, choose the TestThemeExtension.Client project.

  2. Expand the Presentation and Themes nodes, and open the TestTheme.xaml file.

  3. On the menu bar, choose Edit, Find and Replace, Quick Replace.

  4. In the Find and Replace dialog box, enter Segoe UI, Arial in the Find what field, and enter Segoe Script in the Replace with field.

  5. Choose Current Document in the Look in list, and then choose Replace All.

    Eleven occurrences will be replaced, defining Segoe Script for all of the font values.

  6. In the TestTheme.xaml file, locate the TextBoxBackgroundBrush element, and replace <SolidColorBrush x:Key="TextBoxBackgroundBrush" Color="White"/> with <SolidColorBrush x:Key="TextBoxBackgroundBrush" Color="Yellow"/>.

  7. Locate the ToolbarBackgroundBrush element and replace <SolidColorBrush x:Key="ToolbarBackgroundBrush" Color="#FFE9EDF1"/ with <SolidColorBrush x:Key="ToolbarBackgroundBrush" Color="Red"/.

    Note that the color values can be entered as either a System.Drawing.Color value or a hexadecimal color value.


    You can also open the .xaml file in Microsoft Expression Blend 4 and change the colors in a visual designer.

At this point you have created a rudimentary theme, and you can test it in a LightSwitch application.

You can test the theme extension in an experimental instance of Visual Studio. If you have not already tested another LightSwitch extensibility project, you have to enable the experimental instance first.

To enable an experimental instance

  1. In Solution Explorer, select the TestThemeExtension.Vsix project.

  2. On the menu bar, choose Project, TestThemeExtension.Vsix Properties.

  3. On the Debug tab, under Start Action, choose Start external program.

  4. Enter the path of the Visual Studio executable, devenv.exe.

    By default on a 32-bit system, the path is C:\Program Files\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe; on a 64-bit system, it is C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe.

  5. In the Command line arguments field, type /rootsuffix Exp as the command-line argument.


    All subsequent LightSwitch extensibility projects will also use this setting, by default.

To test the theme

  1. On the menu bar, choose Debug, Start Debugging. An experimental instance of Visual Studio opens.

  2. In the experimental instance, on the menu bar, choose File, Open Project.

  3. In the Open Project dialog box, select any existing LightSwitch application project and open it.

  4. On the menu bar, choose Project, ProjectName Properties.

  5. In the project designer, on the Extensions tab, check the TestThemeExtension check box.

  6. Select the General Properties tab, and in the Theme list, choose Test Theme.

  7. On the menu bar, choose Debug, Start Debugging. Observe the changes in appearance in the running application.

This completes the theme extension walkthrough; you should now have a fully functioning theme extension that you can reuse in any LightSwitch project. Of course, you might want to modify the styles to make the theme a bit more pleasing to the eye; the walkthrough is only intended to show you the necessary techniques.

If you are going to distribute your extension, there are a couple more steps that you must take. To make sure that the information displayed for your extension in the project designer and in Extension Manager are correct, update the properties for the VSIX package. For more information, see How to: Set VSIX Package Properties. In addition, there are several things to consider if you are going to distribute your extension publicly. For more information, see How to: Distribute a LightSwitch Extension.