Customize the Default Theme

Learn how to change 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.

Preview
<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.

Property nameDefault value
borderColor#5225C1
width24px

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:

Property nameDefault value
backgroundColor#FFFFFF
backgroundOpacity1
borderColor#EFEEF1
borderRadius16px
fontFamilyInter, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, -apple-system, system
fontSize15px
fontWeight400
padding16px
textAlignleft
textColor#5225C1
textTransformnone

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:

Property nameDefault value
backgroundColor#F80808
backgroundOpacity1
borderColorwhite
borderRadius4px
fontFamilyInter, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, -apple-system, system
fontSize9px
fontWeight400
padding2px 3px
textAligncenter
textColorwhite
textTransformnone

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:

Property nameDefault value
backgroundColor#FFFFFF
backgroundOpacity1
borderColor#EFEEF1
borderRadius16px
fontFamilyInter, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, -apple-system, system
fontSize12px
fontWeight400
padding8px 16px
textAlignleft
textColor#5225C1
textTransformnone

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:

Property nameDefault value
backgroundColor#FFFFFF
backgroundOpacity1
borderRadius16px
fontFamilyInter, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, -apple-system, system
fontSize12px
fontWeight400
hoverobject
hover.backgroundColor#F2EDFC
hover.backgroundOpacity1
margin8px
padding16px 8px
stateobject
state.colortransparent
textAlignleft
textColor#3A424D
textTransformnone
titleobject
title.fontFamilyinherit
title.fontSizeinherit
title.fontWeight600
title.textColor#181B20

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.

Property nameDefault value
backgroundColor#F8F5FF
backgroundOpacity1
borderRadius16px
fontFamilyInter, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, -apple-system, system
fontSize12px
fontWeight400
hoverobject
hover.backgroundColor#F2EDFC
hover.backgroundOpacity1
margin8px
padding16px 8px
stateobject
state.color#5225C1
textAlignleft
textColor#3A424D
textTransformnone
titleobject
title.fontFamilyinherit
title.fontSizeinherit
title.fontWeight600
title.textColor#181B20

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.

Property nameDefault value
backgroundColor#F8F5FF
backgroundOpacity1
borderRadius16px
fontFamilyInter, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, -apple-system, system
fontSize12px
fontWeight400
hoverobject
hover.backgroundColor#F2EDFC
hover.backgroundOpacity1
margin8px
padding16px 8px
stateobject
state.color#5225C1
textAlignleft
textColor#3A424D
textTransformnone
titleobject
title.fontFamilyinherit
title.fontSizeinherit
title.fontWeight600
title.textColor#181B20

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:

Preview
<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>