xz / xz/new.css
Calendar icon in date input is barely visible (dark mode)
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 4.1k
- Forks
- 127
- PR merge metrics
- No merged PRs in 30d
Description
Description
When the web browser is in "dark" mode, the calendar icon on the right side of the date input is barely visible, as shown here:
The issue is not present when the web browser is in "light" mode, as shown here:
To reproduce
-
Configure your computer so that apps use their "dark" mode by default.
-
Use a web browser to visit the official new.css demo site: https://newcss.net/demo/
-
Use the web browser's Developer Tools to edit an existing
<input ... />element so itstypeattribute has a value ofdate. For example:- <input type="email" name="email" required=""> + <input type="date" name="email" required="">
-
See that the calendar icon in the date input field is barely visible.
Environment information:
- OS: Windows 10
- Browser: Brave Version 1.36.116 Chromium: 99.0.4844.74 (Official Build) (64-bit)
Based upon what I see in the demo site's HTML source code (excerpt shown below), I think it is using new.css version 1.1.2:
<head>
<!-- ... -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-fonts@1.1.1/fonts/inter.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
</head>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue on the new.css demo site with a date input in a dark browser theme, then inspect the styles applied to the input and its calendar icon. Done means the calendar icon is clearly visible in dark mode without regressing its light-mode appearance.
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