canonical / canonical/vanilla-framework

[Bug]: Icons calendar and clock in dark mode

Open
#5,696 1 comment 0 reactions 0 assignees View on GitHub
Bug 🐛
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

**Describe the bug**

When you have an input with type="date" or type="time", the input automatically has a calendar or a clock icon. These icons stay black in dark mode, which make them hardly visible.

**To Reproduce**

Steps to reproduce the behavior in LXD UI :

1. Go to Storage > Volumes
2. Click on any existing volume, then snapshot
3. Create a snapshot or edit an existing one
4. See screenshot

**Expected behavior**

Icons should be white in dark mode, and black in light mode.

**Screenshots**

Image

**Desktop (please complete the following information):**

- OS: Ubuntu
- Browser Chrome
- Version 142.0.7444.162

**Additional context**

I fixed this issue in LXD UI repository. Here is the PR: https://github.com/canonical/lxd-ui/pull/1620

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the date and time input styling in Vanilla Framework and compare it with the linked LXD UI pull request. Confirm that the calendar and clock icons are white in dark mode and black in light mode, then verify the behavior in the reported Storage > Volumes snapshot flow.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.