crucialfelix / django-ajax-selects

jQuery UI-powered auto-complete fields for ForeignKey, ManyToMany and text fields
Other
822 stars 249 forks source link

Admin in dark mode = trash/delete/remove icon invisible #299

Closed dmwyatt closed 9 months ago

dmwyatt commented 1 year ago

Dark mode:

image

Light mode:

image

dmwyatt commented 1 year ago

I guess these icons come from jQuery? If so, it looks like there's not a way to change the icon color easily. I guess we'd have to bundle an icon for this and save it in a dark and light color.

crucialfelix commented 1 year ago

Yeah, jQuery UI is pre-dark mode.

In general it makes the most sense to build a separate package that solves this problem using modern tooling and libraries. There isn't much point trying to drag jQuery UI into the future for ever.

You may be able to do a CSS image transform. It may not look perfect, but it could look okay.

dmwyatt commented 1 year ago

I ended up overriding base_site.html by placing the following in templates/admin (assuming you have templates look up setup correctly).

{% extends "admin/base_site.html" %}

{% block extrahead %}
  <style>
      @media (prefers-color-scheme: dark) {
          .ui-icon {
              filter: invert(.8);
          }
      }
  </style>
{% endblock %}

So I end up with:

image

crucialfelix commented 1 year ago

That's not bad at all. Better than nothing. If you can, make a PR. Otherwise I'm overdue (and over busy) to do another fix and a new release.

gidantribal commented 1 year ago

Hello, In the official docs it's stated that you can change the icon and the CSS if needed, overriding the default one. It may be another workaround...

https://django-ajax-selects.readthedocs.io/en/latest/Media-assets.html

crucialfelix commented 9 months ago

Fixed. Thanks for the css!

Screenshot 2023-12-06 at 4 21 17 PM