Custom Windows 10 Universal App Theme

Question

Windows provides Light and Dark Themes for Windows 10 Universal Apps. This is changed in App.xaml in the application node at Requested Theme.

<Application
x:Class="Template.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Template"
RequestedTheme="Dark">

Is there a way to make a custom theme? I realize you can make a resource dictionary and put custom colors, but then you have to include {static resource...} at every attribute you want to apply it to. I think it would be easy to define my own RequestedTheme so I would only need to include it one time.

Answer 1

There are three themes that XAML framework support. However, you can customize each theme by copying the original theme and putting it in your App.xaml's ThemeDictionaries. The default themes are located in :

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0 (Or whatever version)\Generic\Generic.xaml

Once copied, you can now change the default values such as colors, font size, font family and other theme resources.

<Application 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  RequestedTheme="Dark">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
          <!-- Copy theme resources here -->
        </ResourceDictionary>
        <ResourceDictionary x:Key="HighContrast">
          <!-- theme resources -->
        </ResourceDictionary>
        <ResourceDictionary x:Key="Light">
          <!-- theme resources -->
        </ResourceDictionary>
      </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
  </Application.Resources>

Answer 2

On copying Generic.xaml

On the topic of copying Generic.xaml into your project, a comment on this page states:

This will prevent you from ever receiving updates

While this is true, you may want to have more control over when your app receives updates.

I agree it is a bad idea to copy generic.xaml into your project. These resources are built into the framework you are using, so if you want to align with those resources you can simply refer to them by key and they will be available.

However, to maintain control over the timing of accepting updates to those resources (i.e. you don't want to be affected by updates beyond your control without testing your app), creating your own base styles using copies from generic.xaml and basing your own styles on those copies is the right way to go.

On Custom Themes

None of this addresses the question here though; if you use the RequestedTheme system you only have choices between 2 theme palettes called Light and Dark. The only flexibility you have is which palette to apply to which elements.

In other words, the RequestedTheme mechanism is limited to a set number of palettes. Those palette colours can be whatever you like, though they are usually defined at design time. I'm not sure about runtime customisation of the palette at this stage.

If you wanted to allow the user for a custom theme palette, you would need to sacrifice one of light/dark palettes for your palette, making the sacrificed palette unavailable. This may or may not be what your users want, so weigh the decision appropriately.

The RequestedTheme system is powerful and allows switching between the two light/dark modes simple, but isn't flexible enough to support more than 2 custom palettes at this stage.

High Contrast

There is a HighContrast mode allowing 4 (?) more palettes, though I'm not familiar with those. Defining those palettes is done in the same way as defining the Light/Dark palettes through the RequestedTheme system, so it may be that those other palettes are configurable in the same way.

Perhaps in the future I'll gain experience in High Contrast theming and come back to complete this section.