Dark Mode

Enable dark mode across all Velt collaboration components in React, Next.js, and other frameworks using client.setDarkMode for consistent theming.

React / Next.js

Enable Dark Mode on all Components

To enable Dark Mode on all Components, call the client.setDarkMode(true)

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

Enable Dark Mode on individual Components

To enable Dark Mode on individual components, set the darkMode attribute to true.

<VeltComments darkMode={true} />
<VeltPresence darkMode={true} />
<VeltCommentsSidebar darkMode={true} />
<VeltHuddle darkMode={true} />
<VeltArrows darkMode={true} />

API Methods:

commentElement.enableDarkMode()
commentElement.disableDarkMode()

Other Frameworks

Enable Dark Mode on all Components

To enable Dark Mode on all Components, call the Velt.setDarkMode(true)

Velt.setDarkMode(true);

Enable Dark Mode on individual Components

To enable Dark Mode on individual components, set the dark-mode attribute to true.

<velt-comments dark-mode="true"></velt-comments>
<velt-presence dark-mode="true"></velt-presence>
<velt-comments-sidebar dark-mode="true"></velt-comments-sidebar>
<velt-huddle dark-mode="true"></velt-huddle>
<velt-arrows dark-mode="true"></velt-arrows>

API Methods:

commentElement.enableDarkMode()
commentElement.disableDarkMode()