Customize the Default Theme

The notification inbox has a default theme, but you might want to change it, so it matches your site's style. You can do so by overriding default rules.

In the following example, we show how to change the color of the bell icon, and the background color, border radius and font of the footer of the notification inbox.

<MagicBell
  apiKey="MAGICBELL_API_KEY"
  userEmail="dan@example.com"
  theme={{ 
    icon: { borderColor: '#2c73d2' },
    header: { fontFamily: 'Arial', backgroundColor: '#c34a36', borderRadius: '2px' },
    footer: { backgroundColor: '#c34a36' },
  }}
  defaultIsOpen
>
  {(props) => (
    <FloatingNotificationInbox
      height={350}
      {...props}
    />
  )}
</MagicBell>

import React from 'react';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  // Your custom theme definition
  const theme = {
    icon: { borderColor: '#2c73d2' },
    header: { fontFamily: 'Arial', backgroundColor: '#c34a36', borderRadius: '2px' },
    footer: { backgroundColor: '#c34a36' },
  };

  return (
    <MagicBell apiKey="MAGICBELL_API_KEY" userExternalId="mary@example.com" theme={theme}>
      {(props) => <FloatingNotificationInbox height={500} {...props} />}
    </MagicBell>
  );
}

The bell icon

This is an SVG image, you can change the size and color of it.

The header

You can change the background color and its opacity, the text color and size and the border radius among others.

This is a complete list of the customizable setttings:

The unseen badge

This element shows the number of unseen notifications for the current user. You can change the background color and opacity, the border radius, and the font size among others. The size of this element is relative to the size of the bell.

This is a complete list of the customizable setttings:

The footer

You can change the background color and its opacity, the text color and size and the border radius among others.

This is a complete list of the customizable setttings:

The notification

The style of a notification depends on its state. It can be unseen, unread or read.

This is the default style of a read notification:

This is the default style of an unseen notification:

And this is the default style of an unread (but seen) notification:

Dark theme example

By combining the above options you can get a huge variety of themes. For example, this is the definition of a dark theme:

<MagicBell
  apiKey="MAGICBELL_API_KEY"
  userEmail="dan@example.com"
  theme={darkTheme}
  defaultIsOpen
>
  {(props) => (
    <FloatingNotificationInbox
      height={350}
      {...props}
    />
  )}
</MagicBell>

javascript
var theme = {
  icon: { borderColor: '#292d3e' },
  header: {
    backgroundColor: '#FAD776',
    backgroundOpacity: 0,
    borderRadius: '4px',
    textColor: 'white',
  },
  footer: {
    backgroundColor: '#292d3e',
    backgroundOpacity: 1,
    borderRadius: '4px',
    textColor: 'white',
  },
  container: { backgroundColor: '#292d3e' },
  notification: {
    default: {
      backgroundColor: '#292d3e',
      borderRadius: '4px',
      textColor: 'white',
    },
    unread: {
      backgroundColor: '#212328',
      backgroundOpacity: 0.75,
      borderRadius: '4px',
      textColor: 'white',
    },
    unseen: {
      backgroundColor: '#867555',
      backgroundOpacity: 0.2,
      borderRadius: '4px',
      textColor: 'white',
    },
  },
};

var options = {
  apiKey: MAGICBELL_API_KEY,
  userEmail: CURRENT_USER_EMAIL,
  theme: theme,
};