Chrome date input icon not compatible with dark mode

[kgoo124]

Actual behavior
The icon disappears but can be still be clicked and used

Expected behavior
The icon should be visible in dark mode

To Reproduce
Steps to reproduce the behavior:

1. Start in JupyterLab light mode
2. Open a csv file in our Tabular Data Editor
3. Make sure a single column has all cells filled with dates (formatted: YYYY-MM-DD)
4. Toggle on data detection (a calendar icon should appear at the top of the columns with dates)
5. Double-click on a date to edit it and see the icon pop up
6. Switch to JupyterLab dark mode
7. Double-click on a date to edit it and see the icon hidden (can still click on the icon and use as normal)

Screenshots

Desktop (please complete the following information):

• OS: Mac Catalina
• Browser: Chrome 84.0.4147.125

Additional context

• Problem is with Chrome's native HTML date input element. You can't change the color of the icon, thus in dark mode the icon becomes hidden.

[kgoo124]

One possible option is toggle css styling when switching from light to dark mode. The code below inverts the calendar color resulting in a white icon. This seems a little hacky though.

input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1);
}