How to change the background color of the Chakra UI Toast component?

Question

I use Chakra UI and I have several Toast components in my application. They have a blue background color by default since they have status="info".

How can I change the background color of all the toasts with status="info"? And I want to keep all other default styles (width, position etc.), need to change only color.

Ostracoderm

Answer 1

The Toast component uses Alert under the hood.

Alert maps the status prop to a color scheme. This color scheme is used in the theme definition to define the background color.

By default, status="info" maps to blue and the subtle variant is used.

EDIT (Chakra >= 2.0): Toast now uses the solid variant by default. In the following solution, replace subtle with solid to modify the default appearance.

Hence you would need add an override like this to your theme definition:

import { theme as origTheme, extendTheme } from "@chakra-ui/react"

const theme = extendTheme({
  components: {
    Alert: {
      variants: {
        subtle: (props) => { // only applies to `subtle` variant
          const { colorScheme: c } = props
          if (c !== "blue") {
            // use original definition for all color schemes except "blue"
            return origTheme.components.Alert.variants.subtle(props)
          }
          return {
            container: {
              bg: `${c}.500`, // or literal color, e.g. "#0984ff"
            },
          }
        }
      }
    }
  }
})

Color variables like blue.500 are read from the color definitions.

Darton

Answer 2

In the newer versions of Chakra, Toasts are indeed using Alerts under the hood but they have switched to using the solid variant of Alert from subtle. Styling the solid variant of Alert will style your Toast.

Vershen

Answer 3

You can create your own toast component wrapper like follow

import { Flex, Heading, Text } from '@chakra-ui/react';
import React from 'react';

const BaseAlert = (props) => {
  const { title, details, ...style } = props;

  return (
    <Flex
      flexDirection="column"
      alignItems="center"
      justifyContent="center"
      {...style}
      py={4}
      px={4}
      borderLeft="3px solid"
      borderRight="3px solid"
      borderColor={`${style.colorScheme}.700`}
      bgColor={`${style.colorScheme}.100`}
    >
      <Heading
        as="h4"
        fontSize="md"
        fontWeight="500"
        color={`${style.colorScheme}.800`}
      >
        {props.title}
      </Heading>
      {props.details ? (
        <Text color={`${style.colorScheme}.800`}>{props.details}</Text>
      ) : null}
    </Flex>
  );
};

export const ErrorAlert = (props) => {
  return <BaseAlert colorScheme="red" {...props} />;
};

And use it like that

 toast({
    render: () => (
       <ErrorAlert
          title="Impossible d\'ajouter un nouveau moyen de paiement"
          details="Veuillez ressayer ou nous contacter"
       />
     ),
 });

Abilene

Answer 4

in extendTheme you have to change style of Alert. this is my solution and it worked.

const theme = extendTheme(
  {
    
    components: {
      Alert: {
          variants: {
            "left-accent": (props:any) => {
              const { status } = props
              return {
                container: {
                  ...theme.components.Alert.variants?.["left-accent"](props).container,
                  bg: `${status}.300`, 
                },
              }
            }
          }
   
      }
    }
  },

Melantha

Answer 5

Just extend your theme like so:

    components: {
    Alert: {
        variants: {
            custom_info: {
                container: {
                    bg: "#008c45",
                    color: "white",
                },
            },
        },
    },

and then, in your component...

toast({
        title: "Hey!",
        description:"Prrr.",
        status: "info",
        variant: "custom_info",
});

Hardy

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Spooky