Skip to main content

CSS variables

This page lists the Notification and alert specific CSS variables that can be overridden to customize colors and visual states. For general theming concepts and shared theme variables, see the CSS variables overview.

info

Variable names and available options may differ between themes, so make sure to override the variables that correspond to the active theme.

Notification and alert variables​

Variables can be overridden globally on :root or scoped to a specific container.

:root {
  --mbsc-notification-bg: #ffffff;
  --mbsc-notification-text: #1a1a1a;

  --mbsc-toast-bg-color: #333333;
  --mbsc-toast-text-color: #ffffff;
}

.my-notification {
  --mbsc-notification-bg: #f5f5f5;
  --mbsc-snackbar-button-color: #6200ee;
}
info

Theming & dark mode

Variables can be overridden globally on :root, which affects all active themes.

To target a specific theme, use its theme selector:

  • .mbsc-windows
  • .mbsc-windows-dark
  • .mbsc-ios
  • .mbsc-ios-dark
  • .mbsc-material
  • .mbsc-material-dark

iOS theme​

These variables apply when the ios theme is active.

  • --mbsc-alert-bg-color: Alert/confirm/prompt background color
  • --mbsc-alert-text-color: Alert/confirm/prompt text color
  • --mbsc-toast-bg-color: Toast background color
  • --mbsc-toast-text-color: Toast text color
  • --mbsc-snackbar-bg-color: Snackbar background color
  • --mbsc-snackbar-text-color: Snackbar text color
  • --mbsc-snackbar-button-color: Snackbar action button color

Windows theme​

These variables apply when the windows theme is active.

  • --mbsc-alert-bg-color: Alert/confirm/prompt background color
  • --mbsc-alert-text-color: Alert/confirm/prompt text color
  • --mbsc-toast-bg-color: Toast background color
  • --mbsc-toast-text-color: Toast text color
  • --mbsc-snackbar-bg-color: Snackbar background color
  • --mbsc-snackbar-text-color: Snackbar text color
  • --mbsc-snackbar-button-color: Snackbar action button color

Material theme​

These variables apply when the material theme is active.

  • --mbsc-alert-bg-color: Alert/notification background color
  • --mbsc-alert-text-color: Alert/notification text color
  • --mbsc-toast-bg-color: Toast background color
  • --mbsc-toast-text-color: Toast text color
  • --mbsc-snackbar-bg-color: Snackbar background color
  • --mbsc-snackbar-text-color: Snackbar text color
  • --mbsc-snackbar-button-color: Snackbar action button text color