shadcn/ui v3/v4 and –destructive theme variables

In shadcn v3 there were two destructive vars in a theme, --destructive and --destructive-foreground.

Various shadcn components used these the right way, but several used them wrong, using the background color (--destructive) for text. They mostly got away with this because both were generally a shade of red. But on dark backgrounds, it looked wrong.

In shadcn v4 they supply only a single destructive color in the themes and in darker themes it’s a brighter, more-legible color. They then both use it as a text color on normal backgrounds, or use it as a background color and force white as a foreground color. This still isn’t perfect, but it’s better.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.