Skip to content

Calendar icon in date input is barely visible (dark mode) #81

Description

@gitname

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:

image

The issue is not present when the web browser is in "light" mode, as shown here:

image

To reproduce

  1. Configure your computer so that apps use their "dark" mode by default.

    image

  2. Use a web browser to visit the official new.css demo site: https://newcss.net/demo/

  3. Use the web browser's Developer Tools to edit an existing <input ... /> element so its type attribute has a value of date. For example:

    - <input type="email" name="email" required="">
    + <input type="date" name="email" required="">

    image

  4. 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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions