894

❓ Type of change

[ ] 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
[x] 🐞 Bug fix (a non-breaking change that fixes an issue)
[ ] 👌 Enhancement (improving an existing functionality like performance)
[ ] ✨ New feature (a non-breaking change that adds functionality)
[ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
[ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Adds the bg-background class to the Pin-input input fields, which styles it similar to regular Input components, and which fixes the background color in dark mode.

Stackblitz demo without this fix applied

Resolves #894

📸 Screenshots (if appropriate)

Before:

After:

📝 Checklist

[x] I have linked an issue or discussion.
[ ] I have updated the documentation accordingly.

sadeghbarati commented 1 week ago

PIN Input demo is working fine in the documentation because of

html.dark {
    color-scheme: dark;
}

The main shadcn-ui Input OTP also has transparent background for the input element

If you have dark-mode feature in your app you must use color-scheme property to indicate color schemes of your app

Duncank commented 1 week ago

Ah; thank you for that insight, that indeed works as it should. Btw: I've setup the dark mode according to the description in the shadcn docs and I did not spot this info there.

unovue / shadcn-vue

fix: PinInput: Add background-color to fix dark mode #895

🔗 Linked issue

894