Today, I will explore the ExpressionDark Theme and will go through the process I use to generate many great looking variations of this theme. A killer tool that helps generate colors for themes is Kuler. what's even better is the Colorful Expression Add-in for Expression Design and Blend which in fact retrieves the colors from the Kuler back-end . This tool is great since it allows you to browse within Blend various color variations and generates brushes from those colors for you.

Here is a snapshot of the add-in as you will see it in Blend:

image

The codeplex site for Colorful Expression can be found here:http://www.codeplex.com/colorful. For the purpose of my work, I had to make minor changes to Colorful Expression Tool to generate the Brushes with the exact key that ExpressionDark Theme uses.

I created a simple silverlight application that helps preview how those colors will end up looking when applied to the Expression Theme.  The top part of the screenshot below shows the different brushes defined on top of the ExpressionDark.xaml theme. The lower part shows few controls where the Expression Theme was applied using the colors defined above.

You can download the ThemeDesigner Application here

image

Let's walk through the workflow:

1) Loading the Solution with Colurful Add-in

    • Follow the instruction from the codeplex site to get the initial installation done
    • Copy the modified Colorful.Blend.AddIn.dll and Colorful.Control.dll from the Colurful folder that you will find in the ThemeDesigner.zip) and copy to Program Files\Microsoft Expression\Blend 2 folder
    • Start the command line and go to the Blend 2 folder: under Program Files\Microsoft Expression\Blend 2
    • type Blend.exe -addin:Colorful.Blend.AddIn.dll
    • Go to File->Open->Project/Solutions and load the ThemeDesigner solution

2) you should see something like this:

image

3) Changing the color variations:

image

Delete the the "trees" grid

image Drag on of the Palettes from the colorful dialog to the design surface.

(Adjust the Margin to 0,0,0,0 and ColumnSpan to 5...etc)

image You will get the message. Select the second option to overwrite existing resource
image You should see the colors reflected in the controls.

if you run the app, you will see the color scheme reflected in the controls:

image

4) Using the generated brushes to produce a new Expression variation

  • if you like the colors, the next step would be to go back to Blend under the XAML view
  • Select and Copy the following Brushes:

image

  • Locate the ExpressionDark.xaml file from the toolkit sample folder, add to your project (or to the sample project from the last 2 blogs). Copy the brushes above over the existing one.

Conclusion:

My goal with this application was to have a better design experience when tweaking the colors of the expression theme. I hope this will help you as well.

Download ThemeDesigner here