Customize the Default Theme

The notification inbox has a light (default), flat and classic theme, and can be customized to match your site's style. You can do so by overriding default theme definitions.

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

<MagicBell
  apiKey="MAGICBELL_API_KEY"
  userEmail="dan@example.com"
  theme={{
    icon: { borderColor: '#2c73d2' },
    header: { fontFamily: 'Arial', backgroundColor: '#c34a36', textColor: '#fff', borderRadius: '0px' },
    footer: { backgroundColor: '#c34a36', borderRadius: '0px' },
  }}
  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',
      textColor: '#fff',
      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

The bell icon 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 settings:

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. Read state is the default state. Unseen and unread states override properties of the default state.

This is the default style of a read notification:

The unseen notification

This is the default style of an unseen notification. Note that the unseen style inherits properties from the default notification style. When you override these styles, defining the differences compared to default is sufficient.

The unread notification.

And this is the default style of an unread (but seen) notification. Note that the unread style inherits properties from the default notification style. When you override these styles, defining the differences compared to default is sufficient.

Dark theme example

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

<MagicBell
  apiKey="MAGICBELL_API_KEY"
  userEmail="dan@example.com"
  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,
        },
        unseen: {
          backgroundColor: '#867555',
          backgroundOpacity: 0.2,
        },
      },
    }}
>
  {(props) => (
    <FloatingNotificationInbox
      height={350}
      {...props}
    />
  )}
</MagicBell>