Skip to content

Conversation

@Hamed-Ajaj
Copy link
Contributor

Fix outline button hover in dark mode

The outline button variant defines a dark:bg-* background but does not include a corresponding dark:hover:* style.

Because .dark .button has higher specificity than .button:hover, the dark background overrides the hover background, making hover styles appear broken in dark mode while still working correctly in light mode.

What this PR does

  • Adds dark:hover:bg-* to the outline button variant
  • Restores visible hover feedback in dark mode
  • Keeps existing light mode behavior unchanged

Reproduction

  1. Enable dark mode
  2. Use the outline button variant
  3. Hover shows no visual feedback

After this change, hover works consistently in both light and dark modes.

Fixes #9175

@vercel
Copy link
Contributor

vercel bot commented Dec 23, 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 changed the title fix(button): restore hover styles for outline variant in dark mode fix(button): add dark:hover styles to outline variant Dec 23, 2025
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]: Mira outline button missing hover effect in dark mode

1 participant