Styling

​

Disable ShadowDOM

• By default, ShadowDOM 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

<VeltSidebarButton shadowDom={false} />

<VeltSidebarButton shadowDom={false} />

<velt-sidebar-button shadow-dom="false"></velt-sidebar-button>

​

Dark Mode

By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.

Default: false

To enable Dark Mode for sidebar button:

<VeltSidebarButton darkMode={true} />

const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

<VeltSidebarButton darkMode={true} />

const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

<velt-sidebar-button dark-mode="true"></velt-sidebar-button>

const commentElement = Velt.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();