fix: invert calendar and clock icons in dark mode

[tanujbhaud]

Summary

Fixes #5696

Calendar and clock icons in type="date" and type="time" inputs were barely visible in dark mode due to their default black color. This PR applies filter: invert(1) to these icons when inside .is-dark containers, making them white and clearly visible against dark backgrounds.

Changes

• Added CSS rules targeting ::-webkit-calendar-picker-indicator pseudo-elements
• Applied filter: none in light mode (default behavior)
• Applied filter: invert(1) in dark mode (inside .is-dark containers)
• Modified: scss/_base_forms.scss

Implementation Details

This fix is based on the solution implemented in lxd-ui (PR #1620) and adapted to vanilla-framework's dark mode pattern using .is-dark class.

[type='date']::-webkit-calendar-picker-indicator,
[type='time']::-webkit-calendar-picker-indicator {
  filter: none;

  .is-dark & {
    filter: invert(1);
  }
}

Testing

• ✅ Linting passed (stylelint, prettier)
• ✅ Build successful (SCSS compilation)
• ✅ Manual testing confirmed icons are visible in both light and dark modes
• ✅ All existing tests pass

Expected Behavior

Light Mode: Calendar/clock icons remain black (default browser behavior)
Dark Mode: Calendar/clock icons are inverted to white for visibility

Screenshots

See original issue screenshots: #5696

[webteam-app]

tanujbhaud is not a collaborator of the repo

[advl]

Hi @tanujbhaud , thanks for the contribution. Have you considered other alternatives than filter:invert(1) for this problem ?

[tanujbhaud]

Hi @advl, thanks for reviewing! I did consider alternatives, and here's my reasoning:

Main alternatives I looked into:

1. color-scheme: dark - This would change both the icon and the popup calendar to dark mode. However, this felt like too
   broad of an approach since it affects the entire picker UI, not just the icon color. It could also conflict with
   Vanilla's existing theming system.

2. Custom SVG background - Replacing the native icon with a custom SVG would give full control, but it means maintaining
   custom icons and potentially inconsistent UX across browsers/versions. The native browser icons are also optimized and
   familiar to users.

3. Advanced filter combinations (e.g., sepia() + saturate() + hue-rotate()) - More complex but essentially achieves the
   same result as invert(1) with extra overhead.

Why I chose filter: invert(1):

• Simple, performant, and maintains the native browser icon
• Already proven to work in the LXD UI implementation (fix(SnapshotForm): icon color in dark mode lxd-ui#1620)
• Only inverts when inside .is-dark containers, keeping light mode unchanged
• Minimal code footprint and maintenance burden