How to Customize Color Picker in Blazor DOCX Editor

28 Aug 20262 minutes to read

How to customize the color picker in the Document Editor Container

Blazor DOCX Editor (Document Editor) provides options to customize the color picker using ColorPickerSettings in the document editor settings. The color picker offers customization options for its default appearance, including the ability to select between Picker and Palette modes for font and border colors.

The following example code illustrates how to customize the color picker in the Document Editor container.

@using Syncfusion.Blazor.DocumentEditor
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@inject IJSRuntime JSRuntime

<SfDocumentEditorContainer @ref="container" Height="590px" DocumentEditorSettings="@settings">
</SfDocumentEditorContainer> 

@code {
    SfDocumentEditorContainer container; 
    DocumentEditorSettingsModel settings = new DocumentEditorSettingsModel() { ColorPickerSettings = { Mode = ColorPickerMode.Palette , ShowButtons = true , ModeSwitcher = true } };
}

The following table illustrates all the possible properties for the color picker.

Property	Behavior
Columns	It is used to render the ColorPicker palette with specified columns. Defaults to 10
Disabled	It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open. Defaults to false
Mode	It is used to render the ColorPicker with the specified mode. Defaults to Picker
ModeSwitcher	It is used to show / hide the mode switcher button of ColorPicker component. Defaults to true
ShowButtons	It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true

Online demo

Explore how to customize the color picker in the Blazor DOCX Editor for Word documents in this live demo.