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.
Property name | Default value |
---|---|
borderColor | #3498F4 |
width | 24px |
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 name | Default value |
---|---|
backgroundColor | #3498F4 |
backgroundOpacity | 1 |
borderRadius | 8px |
textColor | white |
fontFamily | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif |
fontSize | 14px |
textAlign | left |
textTransform | none |
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 name | Default value |
---|---|
backgroundColor | #DF4759 |
backgroundOpacity | 1 |
borderRadius | 2px |
textColor | white |
fontFamily | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif |
fontSize | 10px |
textAlign | left |
textTransform | none |
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:
Property name | Default value |
---|---|
backgroundColor | #3498F4 |
backgroundOpacity | 1 |
borderRadius | 8px |
textColor | white |
fontFamily | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif |
fontSize | 10px |
textAlign | left |
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 name | Default value |
---|---|
backgroundColor | transparent , #3498F4 on hover. If you change this setting, only the hover state will be affected. |
backgroundOpacity | 0.1 |
borderRadius | 8px |
textColor | white |
fontFamily | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif |
fontSize | 14px |
textAlign | left |
textColor | #3A424D |
textTransform | none |
This is the default style of an unseen notification:
Property name | Default value |
---|---|
backgroundColor | #3498F4 |
backgroundOpacity | 0.05 |
borderRadius | 8px |
textColor | white |
fontFamily | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif |
fontSize | 14px |
textAlign | left |
textColor | #3A424D |
textTransform | none |
And this is the default style of an unread (but seen) notification:
Property name | Default value |
---|---|
backgroundColor | #3498F4 |
backgroundOpacity | 0.1 |
borderRadius | 8px |
textColor | white |
fontFamily | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif |
fontSize | 14px |
textAlign | left |
textColor | #3A424D |
textTransform | none |
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:
javascriptvar 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,
};