Custom theme based on GreenTheme

[John]

Hi,

I want to make a custom theme like the green theme with a dark and a light color variation but with different colors. For example RedTheme or BlueTheme.

What is the best way to achieve this?

 

Thanks

[Martin]

Hello John,

You can modify the colors of any of the themes following the Windows8 theme via the theme palette, including the Green theme. You can change the colors in code behind.

I suggest you use our ColorThemeGeneratior which allows you to make modifications to the theme's colors and shows them runtime, so you can customize your variation.

For a quick blue modification of the dark Green theme:

public MainWindow()
  {
    InitializeComponent();
    BlueVariation();
  }
  private void BlueVariation()
  {
    GreenPalette.Palette.AccentHighColor = (Color)ColorConverter.ConvertFromString("#FF004574");
    GreenPalette.Palette.AccentLowColor = (Color)ColorConverter.ConvertFromString("#FF006DC7");
    GreenPalette.Palette.AlternativeColor = (Color)ColorConverter.ConvertFromString("#FF1D1E21");
    GreenPalette.Palette.BasicColor = (Color)ColorConverter.ConvertFromString("#FF474747");
    GreenPalette.Palette.ComplementaryColor = (Color)ColorConverter.ConvertFromString("#FF444446");
    GreenPalette.Palette.HighColor = (Color)ColorConverter.ConvertFromString("#FF131313");
    GreenPalette.Palette.LowColor = (Color)ColorConverter.ConvertFromString("#FF343434");
    GreenPalette.Palette.MainColor = (Color)ColorConverter.ConvertFromString("#FF1B1B1F");
    GreenPalette.Palette.MarkerColor = (Color)ColorConverter.ConvertFromString("#FFF1F1F1");
    GreenPalette.Palette.MouseOverColor = (Color)ColorConverter.ConvertFromString("#FF005F9D");
    GreenPalette.Palette.PrimaryColor = (Color)ColorConverter.ConvertFromString("#FF2B2C2E");
    GreenPalette.Palette.SelectedColor = (Color)ColorConverter.ConvertFromString("#FFFFFFFF");
    GreenPalette.Palette.SemiAccentLowColor = (Color)ColorConverter.ConvertFromString("#590E67B9");
    GreenPalette.Palette.StrongColor = (Color)ColorConverter.ConvertFromString("#FF646464");
    GreenPalette.Palette.ValidationColor = (Color)ColorConverter.ConvertFromString("#FFE60000");
  }

There was an issue with the code exported to the Clipboard in the current version - it lacked string quotes "" around the exported values. A fixed version of is now uploaded and if you have installed it previously, I suggest you uninstall and reinstall it.

Regards,
Martin
Telerik by Progress

[John]

Ok, thanks. Two more questions.
I can reference the brushes in xaml like
  <Setter Property="Background" Value="{telerik:GreenResource ResourceKey=AccentHighBrush}" />

Is it also possible to this for the colors? ResourceKey=AccentHighColor is not available.

The xaml resources i have for the green theme are not completely right. For example the styles for the combobox, scheduleview and expander are not okay. Can i download the right resources?

[Martin]

Hello John,

Normally the resources accessible through XAML are only the SolidColorBrushes from the theme Palette. If you need to use the colors however (I would guess for use in gradients), I can suggest you expose them from code behind in any convenient way, e.g.:

public MainWindow()
{
  InitializeComponent();
  this.Resources.Add("AccentHighColor", GreenPalette.Palette.AccentHighColor);
}

<SolidColorBrush x:Key="AccentHighColorBrush" Color="{DynamicResource AccentHighColor}" />

As for the wrong resources - normally you could download them again from your account, assemblies, or code. Or if there is a problem, you might see if it is fixed in some of our latest releases or LIBs.

Furthermore, if you are facing any problems with the files, you could share the concrete errors you are receiving, so we could investigate them.

Regards,
Martin
Telerik by Progress

[John]

Thanks for your answer,

I downloaded the latest resources but they are completely different from what i had and now i am wondering if i did it right.

Now i am using the files form my "C:\Program Files (x86)\Telerik\UI for WPF Q2 2016\Themes.Implicit\WPF40\Green\Themes" folder.

The files i downloaded are in "Telerik_UI_for_WPF_Source_2016_3_914\Themes\Green\Themes" and have names with  _x like "Telerik.Windows.Controls_x.xaml" and they include resources from \Core/Controls/Themes.

Are these the right files and can i still use them as i did before, include them in my Styles.xaml and modify them.

[Martin]

Hello John,

What you are describing is the source code, where you could also find the needed raw files (where you had described).

Alternatively you could compile the Themes.Sources_WPF.sln where you would found the output files - in the expandable arrow in the solution for each of the _x files you can find the output of those inclusions for each assembly (e.g. the output of Telerik.Windows.Controls_x.xaml, which could be found under it, is Telerik.Windows.Controls.xaml with all the XAML for the controls in Telerik.Windows.Controls.dll)

Or you can find the XAML in the Themes.Implicit folder of the compiled releases distributions (_Dev_Hotfix for example) available for download.

Regards,
Martin
Telerik by Progress