React / Next.js Other Frameworks < VeltWireframe > < VeltTextCommentToolWireframe > { /* Your custom element */ } </ VeltTextCommentToolWireframe > </ VeltWireframe > < VeltWireframe > < VeltTextCommentToolWireframe > { /* Your custom element */ } </ VeltTextCommentToolWireframe > </ VeltWireframe > < velt-wireframe style = "display:none;" > < velt-text-comment-tool-wireframe > <!-- Your custom element --> </ velt-text-comment-tool-wireframe > </ velt-wireframe > 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
React / Next.js Other Frameworks < VeltComments shadowDom = { false } textCommentToolShadowDom = { false } /> < VeltComments shadowDom = { false } textCommentToolShadowDom = { false } /> < velt-comments shadow-dom = "false" text-comment-tool-shadow-dom = "false" ></ velt-comments > Dark Mode
By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.
Default: false
Below are the examples to enable Dark Mode for text comment tool.
React / Next.js Other Frameworks Using Props:
< VeltComments textCommentToolDarkMode = { true } /> Using API:
const commentElement = client . getCommentElement (); commentElement . enableDarkMode (); commentElement . disableDarkMode (); Using Props:
< VeltComments textCommentToolDarkMode = { true } /> Using API:
const commentElement = client . getCommentElement (); commentElement . enableDarkMode (); commentElement . disableDarkMode (); Using Props:
< velt-comments text-comment-tool-dark-mode = "true" ></ velt-comments > Using API:
const commentElement = Velt . getCommentElement (); commentElement . enableDarkMode (); commentElement . disableDarkMode (); 
