Create a custom theme

MUI includes two built-in themes (dark and light). As of version 1.0.3 you can build your own custom theme. A MUI app typically has the following defined in the global resource dictionary App.xaml:

<ResourceDictionary>
 <ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
 </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

The /FirstFloor.ModernUI;component/Assets/ModernUI.xaml dictionary contains the MUI styles for the core WPF controls (Button, TextBlock, ListBox, etc). The second dictionary contains brushes and other resources defining the theme. If you want to use a custom theme, you need to replace the second dictionary with your own version.

Create a new theme

The following steps describe how to create a new theme.

1. Make sure you have installed the latest Modern UI for WPF Templates extension for Visual Studio 2012.
2. Create a new or open an existing MUI project
3. Add a new Assets folder to your project
4. Add a new item to the Assets folder. In the Add New Item dialog navigate to Visual C# Items > Modern UI for WPF and select Modern UI Theme. Rename the file to ModernUI.MyTheme and select Add.
5. Open App.xaml and replace the current theme with the new theme;

<ResourceDictionary>
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
    <ResourceDictionary Source="/Assets/ModernUI.MyTheme.xaml"/>
  </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Compile and run the project. Your application now uses a new theme similar to the following image;

Customize the theme

A custom theme typically derives from the light or dark theme. By deriving from a built-in theme all required resources are automatically included. All you need to do is override those resources that you need to change. Alternatively you may choose to not override the built-in themes, but that requires you to provide a value for all theme resources.

Deriving from a built-in theme is as simple as adding a MergedDictionary reference to either the light or dark theme;

<!-- derive from Light or Dark theme-->
<ResourceDictionary.MergedDictionaries>
 <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
</ResourceDictionary.MergedDictionaries>

By adding the following brush resource to your custom theme, the Background of all buttons will be Red:

<SolidColorBrush x:Key="ButtonBackground" Color="Red" />