MagicBell

Customize the Default Theme

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

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

Property nameDefault value
borderColor#3498F4
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 setttings:

Property nameDefault value
backgroundColor#3498F4
backgroundOpacity1
borderRadius8px
textColorwhite
fontFamily-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
fontSize14px
textAlignleft
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#DF4759
backgroundOpacity1
borderRadius2px
textColorwhite
fontFamily-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
fontSize10px
textAlignleft
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#3498F4
backgroundOpacity1
borderRadius8px
textColorwhite
fontFamily-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
fontSize10px
textAlignleft

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:

Property nameDefault value
backgroundColortransparent, #3498F4 on hover. If you change this setting, only the hover state will be affected.
backgroundOpacity0.1
borderRadius8px
textColorwhite
fontFamily-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
fontSize14px
textAlignleft
textColor#3A424D
textTransformnone

This is the default style of an unseen notification:

Property nameDefault value
backgroundColor#3498F4
backgroundOpacity0.05
borderRadius8px
textColorwhite
fontFamily-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
fontSize14px
textAlignleft
textColor#3A424D
textTransformnone

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

Property nameDefault value
backgroundColor#3498F4
backgroundOpacity0.1
borderRadius8px
textColorwhite
fontFamily-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
fontSize14px
textAlignleft
textColor#3A424D
textTransformnone

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:

Preview
<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,
};