ui icon indicating copy to clipboard operation
ui copied to clipboard

fix(chartCopyButton) : tooltip arrow visibility in dark mode for chart copy button

Open Hamed-Ajaj opened this issue 2 weeks ago • 1 comments

Description

Fixes the tooltip arrow color mismatch in dark mode for the chart copy button.

Problem

The ChartCopyButton component was using hardcoded colors (bg-black text-white) for the tooltip, which caused the tooltip arrow to not display correctly in dark mode. The arrow uses theme-aware colors (bg-foreground), but the content was hardcoded to black, creating a visual mismatch.

Solution

Removed the hardcoded className="bg-black text-white" from TooltipContent to allow it to use the default theme-aware styling. Now both the tooltip content and arrow use consistent colors that adapt to the current theme.

Before

  • Light mode: Works (black tooltip + black arrow)
  • Dark mode: Broken (black tooltip + white arrow - invisible/mismatched)
image

After

  • Light mode: Works (dark tooltip + dark arrow)
  • Dark mode: Works (light tooltip + light arrow)
image

Related Issue

Closes #8988

Checklist

  • [x] I've made research efforts and searched the documentation
  • [x] I've searched for existing issues
  • [x] The code follows the project's style guidelines
  • [x] I have tested this in both light and dark mode

Hamed-Ajaj avatar Dec 09 '25 08:12 Hamed-Ajaj

@Hamed-Ajaj is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Dec 09 '25 08:12 vercel[bot]