-
Notifications
You must be signed in to change notification settings - Fork 79
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Toast transparency causing issue with text in background #102
Comments
It seems to be expected: chakra-ui/chakra-ui#3861 The solution seems to be adding 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,
}); |
An alternative workaround that allows you to use the Patch the // 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 |
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.
The text was updated successfully, but these errors were encountered: