Skip to content

Conversation

@Hamed-Ajaj
Copy link
Contributor

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

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

@vercel
Copy link
Contributor

vercel bot commented Dec 9, 2025

@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.

@Hamed-Ajaj Hamed-Ajaj force-pushed the fix/tooltip-arrow-dark-mode branch from 5134acd to f366c98 Compare December 9, 2025 08:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: dark mode tooltip

1 participant