Styling

​

Disable ShadowDOM

• By default, Shadow DOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
• Disable the shadow dom to apply your custom CSS to the component.

Default: true

<VeltSingleEditorModePanel shadowDom={false} />

<VeltSingleEditorModePanel shadowDom={false} />

<velt-single-editor-mode-panel shadow-dom="false"></velt-single-editor-mode-panel>

​

Dark Mode

By default, all components are in Light Mode. Use this prop to enable Dark Mode.

Default: false

<VeltSingleEditorModePanel darkMode={true} />

<VeltSingleEditorModePanel darkMode={true} />

<velt-single-editor-mode-panel dark-mode="true"></velt-single-editor-mode-panel>

​

Variants

You can apply variants like you do for other components. You need to define variants using Wireframes. Read more here here.

<VeltSingleEditorModePanel variant="variant-name" />

<VeltSingleEditorModePanel variant="variant-name" />

<velt-single-editor-mode-panel variant="variant-name"></velt-single-editor-mode-panel>