Theme and style customization

The editor's toolbar, icons and surrounding controls can be styled to fit your application. Use your platform's control styling and application-owned icons for that appearance; configure document fonts and colors separately to control the HTML itself.

What you can customize

• Toolbar surfaces: apply normal WPF brushes and resources to Toolbar1.ToolBar and Toolbar2.ToolBar.
• Buttons and lists: reach live controls through ToolbarItemOverrider.ToolbarItems to set content, tooltips, visibility, and other standard WPF properties.
• Editor frame: coordinate EditorBorderColor and EditorBorderWidth with the host application.
• Document defaults: use BodyStyle, DefaultFontFamily, DefaultFontSizeInPt, and DefaultForeColor to establish the editing canvas.

The result can feel native to a resource-driven WPF application while all editing commands remain the real shipped control.

Apply resources to the live toolbars

Define application-level resource keys, then resolve them on the editor's public ToolBar instances. A later resource change can update the same controls without replacing the editor.

htmlEditor1.Resources["EditorToolbarBrush"] =
    new SolidColorBrush(Color.FromRgb(228, 235, 243));
htmlEditor1.Resources["EditorAccentBrush"] =
    new SolidColorBrush(Color.FromRgb(31, 111, 120));

htmlEditor1.Toolbar1.ToolBar.SetResourceReference(
    Control.BackgroundProperty, "EditorToolbarBrush");
htmlEditor1.Toolbar2.ToolBar.SetResourceReference(
    Control.BackgroundProperty, "EditorToolbarBrush");

htmlEditor1.EditorBorderColor = Color.FromRgb(31, 111, 120);
htmlEditor1.EditorBorderWidth = new Thickness(2);

htmlEditor1.Resources("EditorToolbarBrush") =
    New SolidColorBrush(Color.FromRgb(228, 235, 243))
htmlEditor1.Resources("EditorAccentBrush") =
    New SolidColorBrush(Color.FromRgb(31, 111, 120))

htmlEditor1.Toolbar1.ToolBar.SetResourceReference(
    Control.BackgroundProperty, "EditorToolbarBrush")
htmlEditor1.Toolbar2.ToolBar.SetResourceReference(
    Control.BackgroundProperty, "EditorToolbarBrush")

htmlEditor1.EditorBorderColor = Color.FromRgb(31, 111, 120)
htmlEditor1.EditorBorderWidth = New Thickness(2)

Use application-owned vector icons

The live factory buttons accept normal WPF content. This example replaces Save with a resource-colored vector while leaving its editing command in place.

var save = htmlEditor1.ToolbarItemOverrider.ToolbarItems.Save;
var icon = new Path
{
    Data = Geometry.Parse("M2,9 L7,14 L16,3 L18,5 L7,18 L0,11 Z"),
    Width = 18,
    Height = 18,
    Stretch = Stretch.Uniform
};

icon.SetResourceReference(Shape.FillProperty, "EditorAccentBrush");
save.Content = icon;
save.ToolTip = "Save agreement to workspace";

htmlEditor1.BodyStyle =
    "background-color:#ffffff; color:#253143; " +
    "font-family:Arial; font-size:12pt; margin:0;";

Dim save = htmlEditor1.ToolbarItemOverrider.ToolbarItems.Save
Dim icon = New Path With {
    .Data = Geometry.Parse("M2,9 L7,14 L16,3 L18,5 L7,18 L0,11 Z"),
    .Width = 18,
    .Height = 18,
    .Stretch = Stretch.Uniform
}

icon.SetResourceReference(Shape.FillProperty, "EditorAccentBrush")
save.Content = icon
save.ToolTip = "Save agreement to workspace"

htmlEditor1.BodyStyle =
    "background-color:#ffffff; color:#253143; " &
    "font-family:Arial; font-size:12pt; margin:0;"

Keep the boundary clear

The host window, editor toolbars, toolbar content, editor border, and document defaults are customizable. Built-in dialogs and the WYSIWYG document surface do not automatically inherit a host dark palette, so theme those areas deliberately instead of assuming a global dark-mode switch.

For complete ownership of the command surface, see build a custom toolbar. To supply application-specific dialogs, see replacing the default dialogs.

Ask your AI to do this

I use the SpiceLogic WPF HTML Editor. Help me style the host and supported editor surfaces to match my application theme. Confirm the exact API names, types and defaults with the SpiceLogic MCP documentation, then show the changes for my project.