Novu•2mo ago

Disable Selection Color in Notification Center

Hi, I noticed that selection color is always set in the notification center, whether it be the branding color or the theme color. Is there any way we can override to unset this?
https://github.com/novuhq/novu/blob/dea7d4a905dcd1f7682251d1464a77e769c2ff48/packages/notification-center/src/components/notification-center/components/AppContent.tsx#L30

6 Replies

Ask Inkeep•2mo ago

Hi @fyeung, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * Brand * Customizing Notification Center * Iframe Embed * API Reference -----------------------------

Ask Inkeep•2mo ago

Answer The Novu notification center allows for customization of various UI elements, including colors. (1) While there isn't a direct method to disable the selection color, you can override it using the styles prop on the NovuProvider component. (2) Customizing styles You can use the styles prop to customize the styling of each component of the notification center. (1) Here's an example of how you might approach this:

const styles = {
  layout: {
    root: {
      '& *::selection': {
        background: 'transparent',
      },
    },
  },
};

<NovuProvider
  styles={styles}
  // other props...
>
  {/* Your components */}
</NovuProvider>

const styles = {
  layout: {
    root: {
      '& *::selection': {
        background: 'transparent',
      },
    },
  },
};

<NovuProvider
  styles={styles}
  // other props...
>
  {/* Your components */}
</NovuProvider>

, (2) This approach sets the background of the ::selection pseudo-element to transparent for all children of the root element, effectively disabling the visible selection color. (1) Additional considerations Keep in mind that completely disabling the selection color might affect the user experience, as it removes a visual cue for selected text. You may want to consider setting a very light color instead of making it completely transparent if you want to maintain some level of visual feedback. If you're still facing issues with this customization, you might want to click on the "Ask for help" button to tag a team member for further assistance with your specific use case.

Sources [1] Customizing Notification Center [2] API Reference

Ask Inkeep•2mo ago

Feel free to tag @Ask Inkeep with additional questions.

fyeung•2mo ago

Cool this kind of works and I can play around with it ^

Ask Inkeep•2mo ago

Glad I could be helpful. Feel free to create a new thread with any new questions you may have.

Pawan Jain•2mo ago

@fyeung Thanks for the update that it worked. Feel free to ask follow up questions if you face any issues

Gaming

Programming

Disable Selection Color in Notification Center