@priyanka
Taking this as reference https://github.com/novuhq/examples/blob/main/novu-angular-notification-center/src/app/styles.ts#L118
Did you try below code in for styles variable?
notifications: {
root: {
'.nc-notifications-list-item': {
backgroundColor: secondaryColor,
},
},
listItem: {
layout: {
borderRadius: '7px',
color: primaryTextColor,
'.mantine-Avatar-root': {
width: '20px',
height: '20px',
minWidth: '20px',
},
'.mantine-Avatar-image': {
width: '20px',
height: '20px',
minWidth: '20px',
},
'div:has(> .mantine-Avatar-root)': {
border: 'none',
width: '20px',
height: '20px',
minWidth: '20px',
},
},
timestamp: { color: secondaryTextColor, fontWeight: 'bold' },
dotsButton: {
path: {
fill: primaryTextColor,
},
},
unread: {
'::before': { background: unreadBackGroundColor },
},
buttons: {
primary: {
background: primaryButtonBackGroundColor,
color: primaryTextColor,
'&:hover': {
background: primaryButtonBackGroundColor,
color: secondaryTextColor,
},
},
secondary: {
background: secondaryButtonBackGroundColor,
color: secondaryTextColor,
'&:hover': {
background: secondaryButtonBackGroundColor,
color: secondaryTextColor,
},
},
},
},
},
notifications: {
root: {
'.nc-notifications-list-item': {
backgroundColor: secondaryColor,
},
},
listItem: {
layout: {
borderRadius: '7px',
color: primaryTextColor,
'.mantine-Avatar-root': {
width: '20px',
height: '20px',
minWidth: '20px',
},
'.mantine-Avatar-image': {
width: '20px',
height: '20px',
minWidth: '20px',
},
'div:has(> .mantine-Avatar-root)': {
border: 'none',
width: '20px',
height: '20px',
minWidth: '20px',
},
},
timestamp: { color: secondaryTextColor, fontWeight: 'bold' },
dotsButton: {
path: {
fill: primaryTextColor,
},
},
unread: {
'::before': { background: unreadBackGroundColor },
},
buttons: {
primary: {
background: primaryButtonBackGroundColor,
color: primaryTextColor,
'&:hover': {
background: primaryButtonBackGroundColor,
color: secondaryTextColor,
},
},
secondary: {
background: secondaryButtonBackGroundColor,
color: secondaryTextColor,
'&:hover': {
background: secondaryButtonBackGroundColor,
color: secondaryTextColor,
},
},
},
},
},