Branding

Shakr Editor SDK has various customization options, such as theme color or custom logo, to make the editor yours and meet your brand guideline.

Custom logo#

You can specify the logo by using the theme.logo option. Your custom logo will be shown in the 180 X 30 area inside the editor, and logos will be scaled to fit in the area while maintaining the aspect ratio. We recommend using the logo images with 6:1 aspect ratio.

In regards to the image file formats, we recommend using the SVG file for HiDPI support, but you can also use raster type formats such as PNG or JPEG.

Light mode and dark mode#

You can use the theme.appearance option to set the editor's appearance to light mode or dark mode.

info

Please choose the light/dark mode in accordance with the colors included in your brand's logo image. For example, using logo with dark text and setting editor to dark mode may significantly reduce logo text visibility.

Customizing the accent colors#

You can use the theme.accent_color option to customize accent color in the editor, which is used by elements like finish button. You can specify accent color in HEX color code.

Sample code#

const editor = await createShakrEditor({
...,
theme: {
logo: "CUSTOM_LOGO_URL", // Optional
appearance: "light", // Optional, Default: dark, Option: dark, light
accent_color: "FF007B" // Optional
}
});

Please refer to Reference section for more information about all available theme options.

Screenshot#

The below screenshot is an example of the Editor applied with the Light Mode and pink accent color.

Branding