Does Signature Pad Support Dark Mode?

[asis77]

I am using signature_pad in my Vue 3 application and was wondering if this package supports dark mode. Specifically, I’d like to know if there is a built-in way to dynamically adjust the canvas background and pen color based on a dark/light theme.

I have already implemented it this way, but when switching between dark and light mode, the pen/cursor does not draw a signature the first time. I am facing this issue and would appreciate any suggestions you might have.

<VueSignaturePad
  :width="width"
  :height="height"
  ref="signaturePadRef"
  :customStyle="{
    border: isDark ? '#4a5568 3px solid' : 'black 3px solid',
    backgroundColor: isDark ? '#2d3748' : '#fff', // Lighter dark background
    penColor: isDark ? '#e2e8f0' : '#000000', // Softer white for pen
  }"
  :options="{
    onBegin,
    onEnd,
    minWidth: isDark ? 2 : 1, // Increased minimum width for dark mode
    maxWidth: isDark ? 3 : 2, // Increased maximum width for dark mode
  }"
/>

Thank you for your time!

Best regards,
Ashish

[UziTech]

When switching between light and dark mode you can just set the new background color and pen color and redraw the signature with signaturePad.fromData(signaturePad.toData())