How to mask using mix-blend on a dark screen CSS

Question

I am trying to mask a picture on a screen that has 2 modes. A light theme and a dark theme. However, mix-blend screen seems to only work on light themed backgrounds and messes up on dark backgrounds. There is only a slight silhouette on the image. How does one mask using mix-blend on dark themed backgrounds? Any insight using CSS would be appreciated as well!

I am using NextJS combined with Tailwind for css. The prop avatar can be subbed with any image with a transparent background (PNG)

Component:

import React from 'react'
import Image from 'next/image'


function RoundedAvatar({avatar}) {
  return (
    <div>
      // Black shape that spins 
      <div className='absolute mx-auto bg-black w-80 h-80 mt-20 ml-32 overflow-hidden mb-10 md:h-96 md:w-h-96  animate-blob-spin '/>
      // Group of Image and a gradient background
      <div className='relative mx-auto w-96 h-96  overflow-hidden mb-10 md:h-[36rem] md:w-[36rem] mix-blend-screen'>
        // Gradient background
        <div className='absolute mx-auto bg-gradient-to-b from-teal-500 to-white  w-96 h-96 md:h-[36rem] md:w-[36rem] '/>
        // Avatar profile image
        <div className='relative mx-auto w-96 h-96 overflow-hidden mt-20 md:h-96 md:w-96 '>
            <Image src={avatar} layout="fill" objectFit='cover'/>
        </div>
      </div>
    </div>
    
  )
}

export default RoundedAvatar

Tailwind additional theme:

theme: {
extend: {
  animation: {
    'blob': 'blob ease-in-out infinite 8s',
    'blob-spin': 'blob ease-in-out infinite 8s, spin 100s linear infinite',
  },
  keyframes: {
    blob: {
      '0%, 100%': { borderRadius: '24% 76% 35% 65% / 27% 36% 64% 73%'},
      '50%': {borderRadius: '76% 24% 33% 67% / 68% 55% 45% 32%'},
    },
    spin: {
      '0%': { transform: 'rotate(0deg)'},
      '100%': {transform: 'rotate(359deg)'},
    }
  }
 },
},

It works on light mode:

But on Dark mode: