search

yourlabs / django-autocomplete-light

A fresh approach to autocomplete implementations, specially for Django. Status: v4 alpha, v3 stable, v2 & v1 deprecated.
https://django-autocomplete-light.readthedocs.io
MIT License
1.81k stars 468 forks source link

Adding dark mode support #1308

Closed trumpet2012 closed 2 years ago

trumpet2012 commented 2 years ago

This fixes #1245 where the select2 fields don't honor the Django dark mode theme.

The fix requires using the CSS variables defined by the Django admin. These variables get used for both dark mode and light mode. For older Django versions < 3.2 before these variables were added, a fallback value is provided that matches the default styling that select2 was using.

Below you can see the comparison between the different fields and their states before and after these changes are applied.

Dark Mode Comparison

List comparison

## Multiple choice field ### Empty/Inactive #### Before image #### After image ### Empty and dropdown open #### Before image #### After image ### 1 selected #### Before image #### After image ### 1 selected and dropdown open #### Before image #### After image ### 1 selected and searching #### Before image #### After image ## Single choice field ### Empty/Inactive #### Before image #### After image ### Empty and dropdown open #### Before image #### After image ### Choice selected #### Before image #### After image ### Choice selected and dropdown open #### Before image #### After image ### 1 selected and searching #### Before image #### After image

Table comparison

| Field Type | Field State | Before | After | | --- | --- | --- | --- | | Multiple Choice | Empty/Inactive | image | image | | Multiple Choice | Empty and dropdown open | image | image | | Multiple Choice | 1 selected | image | image | | Multiple Choice | 1 selected and dropdown open | image | image | | Multiple Choice | 1 selected and searching | image | image | | Single Choice | Empty/Inactive | image | image| | Single Choice | Empty and dropdown open | image | image | | Single Choice | Choice selected | image | image | | Single Choice | Choice selected and dropdown open | image | image | | Single Choice | 1 selected and searching | image | image |

Light Mode Comparison

List comparison

## Multiple choice ### Empty/Inactive #### Before image #### After image ### Empty and dropdown open #### Before image #### After image ### 1 selected #### Before image #### After image ### 1 selected and dropdown open #### Before image #### After image ### 1 selected and searching #### Before image #### After image ## Single choice ### Empty/Inactive #### Before image #### After image ### Empty and dropdown open #### Before image #### After image ### Choice selected #### Before image #### After image ### Choice selected and dropdown open #### Before image #### After image ### Choice selected and searching #### Before image #### After image

Table view

| Field Type | Field State | Before | After | | --- | --- | --- | --- | | Multiple Choice | Empty/Inactive | image | image | | Multiple Choice | Empty and dropdown open | image | image | | Multiple Choice | 1 selected | image | image | | Multiple Choice | 1 selected and dropdown open | image | image | | Multiple Choice | 1 selected and searching | image | image | | Single Choice | Empty/Inactive | image | image | | Single Choice | Empty and dropdown open | image | image | | Single Choice | Choice selected | image | image | | Single Choice | Choice selected and dropdown open | image | image | | Single Choice | 1 selected and searching | image | image |

jpic commented 2 years ago

Great contributions :tophat:

daweedm commented 1 year ago

Which version of DAL should we use to have this PR included ? Currently the latest (3.9.4) has still this issue

ram495 commented 1 year ago

Hello @trumpet2012 Can you please let me know which version of dal has this support?

trumpet2012 commented 1 year ago

@ram495 @daweedm It should be in version 3.9.7 and later