Catalyst: Darkmode doesn't properly change the menu icon for specific input types

[FoksVHox]

What component (if applicable)

• URL for category: https://tailwindui.com/templates/catalyst
• Component name: Catalyst

Describe the bug When dark mode is enabled, and you're having an input which has type of week, time, month, datetime-local or date the icon for seeing the in-built menu isn't changed to be very visible in dark mode, as it's black.

To Reproduce Steps to reproduce the behavior:

1. Download the latest version of Catalyst
2. Make an input that has a type of week, time, month, datetime-local or date
3. Enable dark mode
4. See error

Expected behavior I'd expect Catalyst to change the color of the icon, so that it's visible in dark mode.

Screenshots If applicable, add screenshots to help explain your problem.

Browser/Device (if applicable)

• OS: Windows 11
• Browser: Chrome
• Version: 125.0.6422.142

Additional context Add any other context about the problem here.

[reinink]

Hey! Thanks for making us aware of this.

The fix here is to add color-scheme: dark to the Input component in dark mode, or even just globally on your html element. You can use the dark:[color-scheme:dark] Tailwind class to do this.

I've just updated the Input component in Catalyst to include this class by default. Feel free to download the updated version from the Tailwind UI website.

Alternatively you can make this change yourself by editing the input.tsx file and adding the dark:[color-scheme:dark] class as the last item in the className array:

  // Disabled state
  'data-[disabled]:border-zinc-950/20 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]',
+ // System icons
+ 'dark:[color-scheme:dark]',

Here's how it looks in dark mode after making this change:

I hope that helps, and thanks again! 🙏