WPF Theming and Colours

Question

I dont know if this is possible, or how to achieve it, but I wanted to ask the question to see if someone has done something similar in WPF.

Currently we have a themed app. There are Light, Dark and Monochrome themes. Each theme has a set of defined colours used for a variety of things.

We had word lately that we would like to make the app more 'customisable' in that there is a wish for users to create their own theme (even including their own logo branding too)

My question here is that since we currently define so many colours for each theme, would it be possible to define say a base colour, then when we use the colour, change it (darker or lighter) to achieve the same look and feel?

Example of the current colour definitions:

  <SolidColorBrush x:Key="BlueDark25" Color="#F6F7F9" />
  <SolidColorBrush x:Key="BlueDark50" Color="#ECEFF3" />
  <SolidColorBrush x:Key="BlueDark100" Color="#DADEE8" />
  <SolidColorBrush x:Key="BlueDark150" Color="#C7CEDC" />
  <SolidColorBrush x:Key="BlueDark200" Color="#B4BED1" />
  <SolidColorBrush x:Key="BlueDark250" Color="#A1ADC5" />
  <SolidColorBrush x:Key="BlueDark300" Color="#8F9DB9" />
  <SolidColorBrush x:Key="BlueDark350" Color="#7C8DAE" />
  <SolidColorBrush x:Key="BlueDark400" Color="#697DA2" />
  <SolidColorBrush x:Key="BlueDark450" Color="#576C97" />
  <SolidColorBrush x:Key="BlueDark500" Color="#445C8B" />
  <SolidColorBrush x:Key="BlueDark600" Color="#364A6F" />
  <SolidColorBrush x:Key="BlueDark700" Color="#182031" />
  <SolidColorBrush x:Key="BlueDark900" Color="#07090E" />

Is it possible to allow the user (or have a predefined) 'BlueDark' definition (just 1), but then manipulate it darker or lighter depending on the usage? So it would be possible for the user to define, say 2 or 3 main colours, and the app does the rest for them?

I appreciate that I would not be able to match exactly the colours shown here, but I am thinking there must be some way of doing it.

Many thanks in advance.

Answer 1

You could set the Opacity of a Brush to a value between 0 and 1. This lets you define a base colour with an opacity of 1 and then define additional brushes that are shades of the base, e.g.:

<SolidColorBrush x:Key="Blue" Color="Blue" />
<SolidColorBrush x:Key="LighterBlue" Color="Blue" Opacity="0.7" />
...

Apart from this solution, I don't think there is an easy way to generate an entire colour scheme using only a base colour in XAML. You might be able to it by generating the brushes programmatically.