Tab Header does'nt work properly with Fluent Dark Theme

6 posts, 1 answers
  1. Markus
    Markus avatar
    10 posts
    Member since:
    Jan 2018

    Posted 14 Sep 2018 Link to this post

    If I use a TabControl with the Fluent theme and switch to the dark mode then the header of the control does not switch to dark theme properly.

    The background seems transparent and the header content is not visible.

    Version 2018 R3

    See really simple sample project attached (renamed zip to jpg ;) ).


  2. Dinko
    Admin
    Dinko avatar
    937 posts

    Posted 19 Sep 2018 Link to this post

    Hi Markus,

    Thank you for the provided files.

    This is expected behavior when the RadRibbonView is placed over white background in the dark variation of our Fluent theme. Let me try to explain. The fluent theme was designed according to the fluent design in windows. The dark version of Fluent theme expected dark background colors to be used behind the controls. We cannot implement a dynamic change of the colors based on the background because we don't know what backgrounds would be applied behind the ribbon control and what colors we should apply to the text. In general, the light palette has a predefined set of colors and the same applies to the dark palette. Currently, the foreground used for the ribbon tabs and the application button in the fluent dark palette is "white", therefore it is a not a good idea to place the control over a "white" background. Instead, I would suggest you set the Background behind the ribbon to a darker color so that the "white" foreground pops-up. For example:
    <Grid Background="#17181A">
       <telerik:RadRibbonView />
    </Grid>

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Markus
    Markus avatar
    10 posts
    Member since:
    Jan 2018

    Posted 19 Sep 2018 in reply to Dinko Link to this post

    Hi Dinko,

    thank you for your response. I understand what you explained.

    But, first of all. I did'nt tal about the Ribbon Control, but the TabControl. 

    And the head definitely doesn't have a white background, but a transparent one.

    If I follow your example, then it works for the dark mode, but now the Light Mode the background of the header is still black. 

    This cannot represent the intention of the initiator.

    Regards 

    Markus

  4. Dinko
    Admin
    Dinko avatar
    937 posts

    Posted 21 Sep 2018 Link to this post

    Hello Markus,

    The explained behavior is also related for the TabControl. Accept my apologies for using RadRibbonView.

    When you want to change the variation of the Fluent theme runtime you will need to change also color behind the controls. So in a light mode, the color should be a light one. In dark mode, the color needs to be a darker one. Still, can you send me a picture of the behavior explained in your last post?

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Markus
    Markus avatar
    10 posts
    Member since:
    Jan 2018

    Posted 26 Sep 2018 in reply to Dinko Link to this post

    Hello Dinko,

    no problem.

    Here are two screenshots: one from light mode and one from dark mode.

    Best regards

    Markus

     

  6. Answer
    Dinko
    Admin
    Dinko avatar
    937 posts

    Posted 01 Oct 2018 Link to this post

    Hi Markus,

    Thank you for the provided pictures. This behavior comes from the requirement of the Fluent theme in a different variation. You can consider changing the color behind the controls so that the tab items are visible.

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top