django-autocomplete-light
django-autocomplete-light copied to clipboard
yourlabs
Adding dark mode support
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
After
Empty and dropdown open
Before
After
1 selected
Before
After
1 selected and dropdown open
Before
After
1 selected and searching
Before
After
Single choice field
Empty/Inactive
Before
After
Empty and dropdown open
Before
After
Choice selected
Before
After
Choice selected and dropdown open
Before
After
1 selected and searching
Before
After
Table comparison
| Field Type | Field State | Before | After |
|---|---|---|---|
| Multiple Choice | Empty/Inactive | |
|
| Multiple Choice | Empty and dropdown open | |
|
| Multiple Choice | 1 selected | |
|
| Multiple Choice | 1 selected and dropdown open | |
|
| Multiple Choice | 1 selected and searching | |
|
| Single Choice | Empty/Inactive | |
|
| Single Choice | Empty and dropdown open | |
|
| Single Choice | Choice selected | |
|
| Single Choice | Choice selected and dropdown open | |
|
| Single Choice | 1 selected and searching | |
|
Light Mode Comparison
List comparison
Multiple choice
Empty/Inactive
Before
After
Empty and dropdown open
Before
After
1 selected
Before
After
1 selected and dropdown open
Before
After
1 selected and searching
Before
After
Single choice
Empty/Inactive
Before
After
Empty and dropdown open
Before
After
Choice selected
Before
After
Choice selected and dropdown open
Before
After
Choice selected and searching
Before
After
Table view
| Field Type | Field State | Before | After |
|---|---|---|---|
| Multiple Choice | Empty/Inactive | |
|
| Multiple Choice | Empty and dropdown open | |
|
| Multiple Choice | 1 selected | |
|
| Multiple Choice | 1 selected and dropdown open | |
|
| Multiple Choice | 1 selected and searching | |
|
| Single Choice | Empty/Inactive | |
|
| Single Choice | Empty and dropdown open | |
|
| Single Choice | Choice selected | |
|
| Single Choice | Choice selected and dropdown open | |
|
| Single Choice | 1 selected and searching | |
|
