Tab Header does'nt work properly with Fluent Dark Theme

[Markus]

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

[Dinko | Tech Support Engineer]

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

[Markus]

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

[Dinko | Tech Support Engineer]

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

[Markus]

Hello Dinko,

no problem.

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

Best regards

Markus

 

[Dinko | Tech Support Engineer]

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