How to Style SfRichTextEditor Toolbar Popup Dialogs in .NET MAUI to Match App Theme?

[Haris Imran]

I'm using SfRichTextEditor in my .NET MAUI app with Light and Dark theme support.

Issue: The toolbar popups (for alignment, insert link, font selection, and table) don't match my app's theme colors. They show default colors instead.

What I Need:

• How to change the background and text colors of these popup dialogs
• Which properties to use for styling the popups
• How to make them work with both Light and Dark themes

Current Code: I've already styled the main toolbar using RichTextEditorToolbarSettings with properties like BackgroundColor, TextColor, etc., but the popups still use default colors.

Is there a way to customize these popup dialog colors to match my app theme?

My SfRichTextEditor Code:

xml

<rte:SfRichTextEditor
    x:Name="InputRichTextEditor"
    HtmlText="{Binding Source={x:Reference Root}, Path=Value, Mode=TwoWay}"
    Placeholder="{Binding Source={x:Reference Root}, Path=Placeholder}"
    ReadOnly="{Binding IsReadOnly, Source={x:Reference Root}, Mode=TwoWay}"
    HeightRequest="200"
    MaximumHeightRequest="800"
    DefaultTextColor="{AppThemeBinding Light=#1E1E1E, Dark=#F8F8F8}"
    EditorBackgroundColor="{AppThemeBinding Light=#F8F8F8, Dark=#1E1E1E}"             
    BackgroundColor="Transparent"
    ShowToolbar="True">
    <rte:SfRichTextEditor.ToolbarSettings>
        <rte:RichTextEditorToolbarSettings 
            BackgroundColor="{AppThemeBinding Light=#FFFFFF, Dark=#2D2D2D}" 
            TextColor="{AppThemeBinding Light=#333333, Dark=#FFFFFF}"
            SelectionColor="{AppThemeBinding Light=#E0B02D, Dark=#E0B02D}"
            IsScrollButtonVisible="True"
            SeparatorColor="{AppThemeBinding Light=#CCCCCC, Dark=#555555}" 
            SeparatorThickness="1" 
            ForwardIconBackground="{AppThemeBinding Light=#F0F0F0, Dark=#404040}" 
            ForwardIconColor="{AppThemeBinding Light=#333333, Dark=#FFFFFF}"
            BackwardIconBackground="{AppThemeBinding Light=#F0F0F0, Dark=#404040}" 
            BackwardIconColor="{AppThemeBinding Light=#333333, Dark=#FFFFFF}"/>
    </rte:SfRichTextEditor.ToolbarSettings>
    <rte:SfRichTextEditor.ToolbarItems>
        <rte:RichTextToolbarItem Type="Bold" />
        <rte:RichTextToolbarItem Type="Italic" />
        <rte:RichTextToolbarItem Type="Underline" />
        <rte:RichTextToolbarItem Type="Strikethrough" />
        <rte:RichTextToolbarItem Type="Separator" />
        <rte:RichTextToolbarItem Type="BulletList" />
        <rte:RichTextToolbarItem Type="NumberList" />
        <rte:RichTextToolbarItem Type="Separator" />
        <rte:RichTextToolbarItem Type="Hyperlink" />
        <rte:RichTextToolbarItem Type="Separator" />
        <rte:RichTextToolbarItem Type="Undo" />
        <rte:RichTextToolbarItem Type="Redo" />
        <rte:RichTextToolbarItem Type="Alignment" />
        <rte:RichTextToolbarItem Type="FontFamily" />
        <rte:RichTextToolbarItem Type="FontSize" />
        <rte:RichTextToolbarItem Type="Table" />
    </rte:SfRichTextEditor.ToolbarItems>
</rte:SfRichTextEditor>

Environment:

• .NET MAUI
• Syncfusion.Maui.RichTextEditor
• iOS and Android

[Vidyalakshmi Mani]

Hi Haris,

Thank you for reaching out with your query regarding styling the SfRichTextEditor toolbar popup dialogs in your .NET MAUI application.

We understand the importance of maintaining visual consistency across your app, especially when supporting both Light and Dark themes. Currently, the SfRichTextEditor control is in preview stable, and we are actively working on improving its customization capabilities, including better support for theming across all UI elements.

The toolbar of the SfRichTextEditor is composed of multiple internal Syncfusion controls. At present, there is no direct property available to style these popup dialogs uniformly. However, you can apply custom styles by targeting the individual controls used within each dialog.

Styling Guidance

• Alignment & Font Selection: These dialogs utilize the SfPicker control. You can apply styles by setting the Style property on SfPicker.

• Insert Link Dialog: This is built using SfTextInputLayout and Entry controls. Styling can be applied to both components individually.

• Table Insertion Dialog: This uses the SfNumericEntry control, which also supports styling via its Style property.

To ensure compatibility with both Light and Dark themes, we recommend using the AppThemeBinding markup extension in your styles.

We’ve added this scenario to our internal improvement list. Our goal is to provide a more streamlined and centralized approach to styling all elements of the SfRichTextEditor, including popup dialogs, in future updates.

For your convenience, we’ve provided a demo and attached a sample that illustrates how to apply styles to the internal controls used in the popup dialogs. We hope this helps you align the editor’s appearance with your app’s theme.

 

<ResourceDictionary>

<picker:PickerTextStyle x:Key="pickerTestStyle" FontSize="12" TextColor="{AppThemeBinding Light=#1E1E1E, Dark=#F8F8F8}" FontAttributes="Bold"/>

<Style TargetType="picker:SfPicker">

         <Setter Property="Background" Value="{AppThemeBinding Light=#F8F8F8, Dark=#1E1E1E}"/>

         <Setter Property="TextStyle" Value="{StaticResource pickerTestStyle}"/>

</Style>

<Style TargetType="popup:SfPopup">

         <Setter Property="Background" Value="{AppThemeBinding Light=#F8F8F8, Dark=#1E1E1E}"/>

         <Setter Property="PopupStyle">

             <Setter.Value>

                 <popup:PopupStyle AcceptButtonTextColor="{AppThemeBinding Light=#1E1E1E, Dark=#F8F8F8}" DeclineButtonTextColor="{AppThemeBinding Light=#1E1E1E, Dark=#F8F8F8}" HeaderTextColor="{AppThemeBinding Light=#1E1E1E, Dark=#F8F8F8}"/>

             </Setter.Value>

         </Setter>

</Style>

 </ResourceDictionary>

We appreciate your understanding and continued support. Thank you.

Regards,

Vidyalakshmi M.