This is a migrated thread and some comments may be shown as answers.

Tab Header does'nt work properly with Fluent Dark Theme

5 Answers 57 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Markus
Top achievements
Rank 1
Veteran
Markus asked on 14 Sep 2018, 07:02 AM

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 ;) ).


5 Answers, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 19 Sep 2018, 06:34 AM
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.
0
Markus
Top achievements
Rank 1
Veteran
answered on 19 Sep 2018, 01:59 PM

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

0
Dinko
Telerik team
answered on 21 Sep 2018, 10:45 AM
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.
0
Markus
Top achievements
Rank 1
Veteran
answered on 26 Sep 2018, 07:06 AM

Hello Dinko,

no problem.

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

Best regards

Markus

 

0
Accepted
Dinko
Telerik team
answered on 01 Oct 2018, 06:59 AM
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.
Tags
TabControl
Asked by
Markus
Top achievements
Rank 1
Veteran
Answers by
Dinko
Telerik team
Markus
Top achievements
Rank 1
Veteran
Share this question
or