RadSyntaxEditor with XmlTaggers keep text in black on Dark theme

[Florian]

Hi,

I'm using the RadSyntaxEditor with the XmlTaggers. 

Unfortunately, when I switch from Light theme to Dark theme, the background color change in black but the text don't became white.

So we haven't a lot of contrast between background and text.

I use implicit style :

                <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.SyntaxEditor.xaml"/>

I try to force it :  <telerik:RadSyntaxEditor x:Name="SyntaxEditor" Margin="10,10,0,10" telerik:StyleManager.Theme="VisualStudio2013">.

Nothing change. You will find attached two pictures describing the situation.

Oh, and I'm using Telerik 2020.1.115.45.

 

Regards,

Florian

[Petar Mladenov]

Hi Florian,

I am a bit confused what you mean exactly by '"switching from dark to light theme" - is it the variation of the VisualStudio2013 theme or is it the Palette of the SyntaxEditor ?

Looking at your pictures, it seems to me the theme is VisualStudio2013_Dark and the Palette is Light:

This is expected result and is due to the fact that themes are many whereas the palettes are only a few and there are some combinations that do not produce good visual results. We have tried to list recommendations for these scenarios and for this theme we recommend the Dark variation:

Also you can consider a custom pallette which only overrides the problematic XmlContent color in this case.

Regards,
Petar Mladenov
Progress Telerik

[Florian]

Thank you Petar for all this information ! 

You were right to suppose that the change of theme from Light to Dark was the change from VisualStudio2013 to VisualStudio2013_Dark.
To tell the truth, I didn't know that myself... This function is part of our framework that manages my application and its themes. I thought the VisualStudio2013 theme had its own dark mode.

Anyway, you've also just revealed me that the RadSyntaxEditor had palettes in addition to the theme. I thought that the colours were automatically managed by the XmlTagger depending on the theme.

To solve my problem, I'd like to be able to apply the right palette depending on the theme. Is this possible directly from Xaml using a DataTrigger, for example? Because I don't have control over the function responsible for changing the theme in my application.
I'd also like to respect the MVVM model.

Regards,
Florian 

[Petar Mladenov]

Yes, since Palette property is a dependency property you can bind it in XAML to a ViewModel property of type SyntaxPalettes.Light/Dark/Neutral or set it via trigger to the static instance {x: Static palettes:SyntaxPalettes.Light} if you have defined the palettes like so:

xmlns:palettes="clr-namespace:Telerik.Windows.Controls.SyntaxEditor.Palettes;assembly=Telerik.Windows.Controls.SyntaxEditor"

[Florian]

Okay but is there a way to get the current theme used on the RadSyntaxEditor ?

For the moment, this my RadSyntaxEditor :

<telerik:RadSyntaxEditor x:Name="SyntaxEditor" Margin="10,10,0,10">

	<telerik:RadSyntaxEditor.Style>
		<Style TargetType="telerik:RadSyntaxEditor">
			<Style.Triggers>
				<DataTrigger Binding="{CurrentTheme}" Value="VisualStudio2013_Dark">
					<Setter Property="Palette" Value="NeutralDark" />
				</DataTrigger>
				<DataTrigger Binding="{CurrentTheme}" Value="VisualStudio2013">
					<Setter Property="Palette" Value="Light" />
				</DataTrigger>
			</Style.Triggers>
		</Style>
	</telerik:RadSyntaxEditor.Style>
	
	<telerik:EventToCommandBehavior.EventBindings>
		<telerik:EventBinding EventName="Loaded" Command="{Binding m_oCmdGetDocument}" CommandParameter="{Binding }"/>
		<telerik:EventBinding EventName="DocumentContentChanged" Command="{Binding m_oCmdSetDocument}" CommandParameter="{Binding }"/>
	</telerik:EventToCommandBehavior.EventBindings>
</telerik:RadSyntaxEditor>

I found how to trigger the palette but as I said before I haven't access to the ChangeThemeMethod so I don't know when it change and for what...

[Petar Mladenov]

With DataTriggers, the CurrentTheme should be a property from your ViewModels, so the theme change logic should set both StyleManager.Theme and CurrentTheme from your ViewModel. Instead, I would suggest using a Style.Triggers and add normal Trigger directly with binding to telerik:StyleManager.Theme property.

[Florian]

Hello Petar,

I try to do this but unfortunately, it doesn't work because when I use this :

            <telerik:RadSyntaxEditor.Style>
                <Style TargetType="telerik:RadSyntaxEditor">
                    <Style.Triggers>
                        <Trigger Property="telerik:StyleManager.Theme" Value="VisualStudio2013_Dark">
                            <Setter Property="Palette" Value="NeutralDark" />
                        </Trigger>
                        <Trigger Property="telerik:StyleManager.Theme" Value="VisualStudio2013">
                            <Setter Property="Palette" Value="Light" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </telerik:RadSyntaxEditor.Style>

I can't use the implicit style logic. The SyntaxEditor use his default theme which is VisualStudio2013 and stay in light mode.

Is there a way to use implicit style logic within using the telerik:RadSyntaxEditor.Style ?

[Petar Mladenov]

Its not recommended to mix explicit Style declaration and implicit styles. If you need to change a property when implicit style is changed, you better change the property in the code responsible for implicit theme change.

[Florian]

Hello Petar,

Thanks for your response.

I actually realised that mixing explicit and implicit style declarations wasn't a good idea.

But what do you do when you're using implicit styles and you need to customise a style property of a control? 
Because when you do this, the implicit style is immediately overwritten by the default style.
So, we have to use an explicit declaration, which will prevent the implicit style from working. It's not very convenient...

Why isn't the choice of palette automatic depending on the implicit style? I understand that the choice is left up to the individual to customise, but I don't understand how it works by default...
When style is Light you should use Light palette by default and when style is Dark, the palette should be Dark or NeutralDark by default...

[Petar Mladenov]

"What do you do when you are using implicit styles and you need to customize a style property" - you can take a look at this article describing a possible approach.
"Why isn't the choice of palette automatic depending on the implicit style?" - this works for most of the themes in the following table (all themes without an *) when switching from theme to theme but not a to a theme variation. Theme variation is not a dependency property and currently there is no technical solution to catch this change in XAML.

[Florian]

Okay thanks for your time, your patience and your answers Petar !

I have chosen to solve my problem by using a custom palette which works with Light and Dark variation.