You can customize components by enabling Dark Mode.

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

To enable Dark Mode for all components:

let client = useVeltClient();
client.setDarkMode(true);

To enable Dark Mode for individual components:

<VeltComments 
  darkMode={true}
  dialogDarkMode={true}
  pinDarkMode={true}
  textCommentToolDarkMode={true}
  textCommentToolbarDarkMode={true}
/>

<VeltPresence darkMode={true} />
<VeltCommentsSidebar darkMode={true} />
<VeltSidebarButton darkMode={true} />
<VeltCommentBubble darkMode={true} />
<VeltCommentTool darkMode={true}/>
<VeltHuddle darkMode={true} />
<VeltArrows darkMode={true} />

API Method:

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

Was this page helpful?

Remove Shadow DOMUse CSS Library