[Bug]: Select does not apply error styling in dark mode

[jmhoffmann9612]

Tremor Version

3.17.2

Link to minimal reproduction

https://github.com/jmhoffmann9612/tremor-select-darkmode-error-bug

Steps to reproduce

1. Run npm run dev / npx next dev.
2. Open localhost:3000 in browser.
3. Enable dark mode in system settings.

What is expected?

Select component should apply error styling (red border and text) in dark mode.

What is actually happening?

• Select component does not have error styling in dark mode.
• Light mode has the expected styling.

---

What browsers are you seeing the problem on?

Chrome, Firefox

Any additional comments?

Not super familiar with the inner workings of the library, but it seems like <Select /> elements get their error styling from getSelectButtonColors in selectUtils.ts.

tremor/src/components/input-elements/selectUtils.ts

Lines 47 to 48 in 3dc49f9

	hasError && "text-red-500 placeholder:text-red-500",
	hasError ? "border-red-500" : "border-tremor-border dark:border-dark-tremor-border",

It seems this bug happens because the expressions for when hasError is true do not include dark: modifiers, so tailwind-merge does not overwrite any previously set dark:text-... and dark:border-... like here:

tremor/src/components/input-elements/Select/Select.tsx

Line 125 in 3dc49f9

"dark:border-dark-tremor-border dark:shadow-dark-tremor-input dark:focus:border-dark-tremor-brand-subtle dark:focus:ring-dark-tremor-brand-muted",

---

Patching the lines in selectUtils.ts from

hasError && "text-red-500 placeholder:text-red-500",
hasError ? "border-red-500" : "border-tremor-border dark:border-dark-tremor-border",

to

hasError && "text-red-500 placeholder:text-red-500 dark:text-red-500 dark:placeholder:text-red-500",
hasError ? "border-red-500 dark:border-red-500" : "border-tremor-border dark:border-dark-tremor-border",

with patch-package has worked in my project, but I so far cannot tell if this causes any unintended side effects.

[severinlandolt]

Thanks for noticing and thank for the patch suggestions 🫶

[severinlandolt]

Note: Will add this to the next fix version!

[github-actions]

🎉 This issue has been resolved in version 3.17.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀