[FR] Liveness - FaceLivenessDetector component to support Theme Object and Color Mode

[lwin-kyaw]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Liveness

Please describe your feature-request in detail.

Hi, FaceLivenessDectector component does not follow the colors from ThemeObject and ColorMode.

Affected Version:

• 3.0.13/14/15 (versions I have tried)
• examples from amplify-ui repo

Example Code

const theme: Theme = {
  name: 'liveness-theme',
  overrides: [defaultDarkModeOverride],
};
...
return (
  <ThemeProvider theme={theme} colorMode="dark">
    <FaceLivenessDetectorCore ... />
  </ThemeProvider>
);

Expected Result

Actual Result

Please describe a solution you'd like.

I have noticed that liveness oval canvas fillStyle has been hard-coded and set to white color (#fff) during detectInitialFaceAndDrawOval.

// packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts
ctx.fillStyle = isStartScreen
  ? getComputedStyle(canvas).getPropertyValue(
      '--amplify-colors-background-primary'
    )
  : '#fff';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);

Tbh, I don't have enough knowledge on image recognition subject so I am not really whether it was by design or not. If it's not by design, it would be nice if users could modify the canvas fillStyle via ThemeObject so that it will align with the App theme.

We love contributors! Is this something you'd be interested in working on?

• [X] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[reesscot]

@lwin-kyaw The hardcoded background color is required by the ML model to get enough light on the user's face to effectively do the Liveness check. We are considering adding the ability to customize more of the theme to our roadmap.