Toast transparency causing issue with text in background

[dgrcode]

I haven't checked if this is happening in light mode as well, but I've seen a few things using opacity in dark mode (borders, dividers, etc), so I wouldn't be surprised if this was a chakra ui issue on the dark mode default theme.

[dgrcode]

It seems to be expected: https://github.com/chakra-ui/chakra-ui/issues/3861

The solution seems to be adding variant: "solid" in the toast call argument. I don't like how it looks in light mode with solid, so I'll go with the following for new toasts.

import { useColorModeValue } from "@chakra-ui/react";
const toastVariant = useColorModeValue("subtle", "solid");

toast({
  description: "Can't get the message to sign. Please try again",
  status: "error",
  variant: toastVariant,
});

[apancutt]

An alternative workaround that allows you to use the subtle, top-accent and left-accent variants in dark mode while keeping a slightly tinted background based on the status:

Patch the useToast() function provided by Chakra…

// src/helper/toast.ts
import { useToast as chakraUseToast, useColorModeValue } from '@chakra-ui/react';

export const useToast = () => chakraUseToast({
  containerStyle: useColorModeValue(undefined, {
    bg: 'chakra-body-bg',
    rounded: 'md',
  }),
});

Use the patched function instead of the one provided by Chakra…

// src/component/MyComponent.tsx
import { Button, VStack } from '@chakra-ui/react';
import type { FunctionComponent } from 'react';
import { useCallback } from 'react';
import { useToast } from '../helper/toast';

const variants = [ 'subtle', 'top-accent', 'left-accent' ] as const;

export const MyComponent: FunctionComponent = () => {

  const toast = useToast();

  const showToast = useCallback<(variant: typeof variants[number]) => void>((variant) => {
    toast({
      variant,
      title: `Example ${variant} toast`,
    });
  }, [ toast ]);

  return (
    <VStack>
      {variants.map((variant) => (
        <Button key={variant} onClick={() => showToast(variant)}>Show {variant} Toast</Button>
      ))}
    </VStack>
  );

};

EDIT: Use a patched useToast() instead of having to declare containerStyles each time a toast is used