Metro themes should support Accents rather than Tints

Guys, any progress on the Theme front?  

Hello,

Yes we have just started looking into it.  We have already updated Metro themes to use a newer larger title bar button size and adjusted their glyphs to render exactly like Windows 10.  See our related blog post:

http://blog.actiprosoftware.com/post.aspx?id=99151091-8ee5-44bd-809b-169bcd737c83

I know you are specifically looking for accent colors similar to Office 2016 and that is something we will be looking at next.  There are a number of design hurdles for that though.  We'd love to get your thoughts on some issues like:

1) Are you only looking to accent the title bar area?

2) Should all toolbar button, ribbon button, and other various highlights (listboxes, etc.) all be updated to match the accent color?

3) Would you ever have a scenario where two windows in an app would need different accents?  This would probably be very difficult to achieve.

4) How would you like to be able to configure an accent?  Like would you prefer to have some wizard where you input some colors at design time and it spits out a XAML resource dictionary file you reference in your app with updated brushes, or would you like to call a method on ThemeManager instead and have it all done for you?

There are other questions, but these are a start.

I wouldn't mind a quick skype discussion first. My id is xlsupport  If it's green just holler!

Else I'll sit down and draft an answer over the weekend. Thanks, Jurgen

We have the Office 2016-like Colorful and White themes and 7 accent color variations of each completed and ready to ship in the upcoming 2016.1 version.  If you would like to help test a pre-release, please write our support address and we'll communicate with you offline there.

Yes!  Pm sent :-) 

Has there been any progress made allowing to create custom MetroLight derived color themes?
Are there plans to support this?

Kind Regards

Hello,

Can you give some specific detail on what you would like to do?  For instance, are you wanting to be able to specify an accent color and have it fill in everything else in similar to how we support the built-in variations for Metro themes?  Thanks!

well..  assume i want a night theme: black background with an exact solid orange accent color. think about your current current approach with tinting and compare to an ideal scenario...

Hello,

from what I have seen so far in reconstructing the available brushes, there are three main colors more or less for the ribbon itself (plus some foreground and background of the default controls which are usually black and white):

1. Base color
2. Hover color / Lighter base color
3. Pressed color / Darker base color

At the moment I am manually redefining all brushes to recreate a theme with a different base color like this:

            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundActiveNormalBrushKey}" Color="{StaticResource EdevisThemeForegroundLightColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundActiveHoverBrushKey}" Color="{StaticResource EdevisThemeForegroundLightColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundActivePressedBrushKey}" Color="{StaticResource EdevisThemeForegroundLightColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundInactiveNormalBrushKey}" Color="{StaticResource EdevisThemeInactiveColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundInactiveDisabledBrushKey}" Color="{StaticResource EdevisThemeDisabledColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonBackgroundActiveHoverBrushKey}" Color="{StaticResource EdevisThemeHoverColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonBackgroundActivePressedBrushKey}" Color="{StaticResource EdevisThemeSelectedColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonBorderActiveHoverBrushKey}" Color="{StaticResource EdevisThemeHoverColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonBorderActivePressedBrushKey}" Color="{StaticResource EdevisThemeSelectedColor}" />

All together are about 60 brushes which I needed to identify one by one because the demo tool lists them all, but from the naming it is not directly clear what they are for. And even now it is not 100% perfect but OK.

My suggestion would be to create a class like TintedThemeCatalog for Metro where you can specify all the colors that make up the theme (the three base colors, or all colors in seperate constructors, or give the class properties for the colors to change before registering the theme). The class would fill in the colors at the right spots.

Kind Regard

Ok thanks for the input... we'll add this suggestion to the TODO list.

Just derive all your brushes from a few base color resources... and make those accessible.

I vote to move it to the top of that TODO list ;-)