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
Example
<VeltCommentsSidebar shadowDom={false} />
API methods
const commentElement = client.getCommentElement();
commentElement.enableSidebarShadowDOM();
commentElement.disableSidebarShadowDOM();
Example
<VeltCommentsSidebar shadowDom={false} />
API methods
const commentElement = client.getCommentElement();
commentElement.enableSidebarShadowDOM();
commentElement.disableSidebarShadowDOM();
Example
<velt-comments-sidebar shadow-dom="false"></velt-comments-sidebar>
API methods
const commentElement = Velt.getCommentElement();
commentElement.enableSidebarShadowDOM();
commentElement.disableSidebarShadowDOM();
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 comments sidebar:
Example
<VeltCommentsSidebar darkMode={true} />
API methods
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
Example
<VeltCommentsSidebar darkMode={true} />
API methods
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
Example
<velt-comments-sidebar dark-mode="true"></velt-comments-sidebar>
API methods
const commentElement = Velt.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();