High contrast theme ?

2 posts, 0 answers
  1. Michael
    Michael avatar
    19 posts
    Member since:
    Aug 2014

    Posted 04 Mar 2015 Link to this post

    Hey all.

    I was just playing around with the new Office inspired templates (they look great !), and have a query.
    When I set the Windows Theme to high contrast, the Telerik application does not follow suit, which is an issue where accessibility is concerned.

    I've attached a screenshot to illustrate my point.
  2. Evgenia
    Evgenia avatar
    1437 posts

    Posted 09 Mar 2015 Link to this post

    Hello Michael,

        Let me start with stating that our themes are independent and does not rely on Windows settings or themes. You can still achieve the desired look though.
    For the purpose you might use the fact that Outlook template has our Office 2013 Theme applied. It provides palette of colors that you might modify. Now you need the exact system colors being applied when Windows has HighContrast theme. For the purpose WPF exposes a swatch of colors via SystemColors class. I attached a modified version of our Outlook template where I have shown how you might achieve such customization. Please check the attached image where the result is demonstrated. There are some limitations though that I'd like to point out:

    1. In HighContrast themes there is default Color that get's applied on Foreground and Border of Disabled controls. For Office2013 theme we do not apply specific Color - GrayTextBrush but change the Opacity of the elements when Disabled.
    2. We do not have separate Brushes for White Foreground (the one used in Headers) and White Background. This means that changing the MainBrush that is the only one White Brush in the theme will get applied on both the Texts and Background.
    3. RadRichTextBox that we use to edit the currently selected mail has hardcoded White Background that does not come from Office2013 theme. You'll need an implicit style that sets the Background property of the control to one of the Brushes that the theme exposes. For example:

    <Style TargetType="telerik:RadRichTextBox" BasedOn="{StaticResource RadRichTextBoxStyle}">
           <Setter Property="Background" Value="{telerik:Office2013Resource ResourceKey=MainBrush}"/>

    As you already know this will make both the Background and the Foreground Black as they both point to MainBrush so I'm suggesting that you add another setter for Foreground in this style where you hardcode the Foreground to White. This is again demonstrated in the attached project.

    All these limitations can be workarounded but require additional work on your side - to restyle or retemplate some of the controls in the application to get the exact look of MS Outlook in HighContrast theme. Feel free to modify the attachment as you wish and let me know if there is anything else I can assist you with.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top