import { VeltComments, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {
  const { client } = useVeltClient();  

  useEffect(()=>{
    if(client){
      const commentElement = client.getCommentElement();
      commentElement.enableDarkMode();
      commentElement.disableDarkMode(); 
    }
  })

  return (
    <div>
        <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} />
    </div>
  )
}

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();

import { VeltComments, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {
  const { client } = useVeltClient();  

  useEffect(()=>{
    if(client){
      const commentElement = client.getCommentElement();
      commentElement.enableDarkMode();
      commentElement.disableDarkMode(); 
    }
  })

  return (
    <div>
        <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} />
    </div>
  )
}