Toast dark theme transparent background

🐛 Bug report

I think this is a bug as it hurts legibility. I noticed the subtle and accent variants of toasts in dark mode have transparent backgrounds. Should probably have them be a solid color by default?

💥 Steps to reproduce

1. Go to https://chakra-ui.com/docs/feedback/toast
2. Ensure dark mode is turned on
3. Click on show subtle-toast
4. See transparent background

[antoniel]

You could try variant="solid", this variant provides a full filled background with opacity:1

[dgrcode]

Hey 👋

For other people landing here, what I found to be a nice alternative for the default dark theme to avoid the transparency is the following:

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

toast({
  description: "The description shown on the toast",
  status: "error",
  variant: toastVariant,
});