[Django] #34670: Django Admin light theme flickers on dark system
Django
-----------------------------------------+------------------------
Reporter: tfeldmann | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-----------------------------------------+------------------------
My system is set to dark mode: macOS 13.4 (22F66) with Safari 16.5
(18615.2.9.11.4).
Clicking any link in django admin will result in first showing the dark
theme for a short moment and then switching to the light theme.
--
Ticket URL: <https://code.djangoproject.com/ticket/34670>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Reporter: tfeldmann | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.2
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by tfeldmann):
* Attachment "Django Flickering.mp4" added.
A video of the problem
Django
Reporter: M.Eng. Thomas | Owner: nobody
Feldmann |
Type: Bug | Status: closed
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: needsinfo
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Mariusz Felisiak):
* status: new => closed
* resolution: => needsinfo
Comment:
This is probably related with Django Debug Toolbar. It slows everything
down and makes the switch visible. I don't think there is anything that
Django could do better here. Please reopen the ticket if you can provide
details about why and where Django is at fault.
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:1>
Django
-------------------------------------+-------------------------------------
Reporter: M.Eng. Thomas | Owner: nobody
Feldmann |
Type: Bug | Status: closed
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: needsinfo
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* Attachment "django-flash(2).mp4" added.
--
Ticket URL: <https://code.djangoproject.com/ticket/34670>
Django
-------------------------------------+-------------------------------------
Reporter: M.Eng. Thomas | Owner: nobody
Feldmann |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Spencer Lowe):
* status: closed => new
* resolution: needsinfo =>
Comment:
I have been able to replicate this on a fresh install (see latest video)
How to replicate:
1. Set OS to dark mode or emulate it via chrome tools -
https://dev.to/codepo8/quick-developer-tools-tip-simulating-dark-light-
colour-mode-1cpg
2. Force Django Admin to light mode
3. Click around and see
Why is this happening you may ask. The JS code that forces the theme to
dark/light is set to run on page load.
https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/theme.js#L3
Because of this the full page loads for a moment with the dark theme, then
the page load event happens and then the js code changes the theme to
light.
The initTheme() and setTheme() functions don't really need to be inside
the event page load. Nothing in those 2 functions are doing anything that
require the entire page to be loaded. It is just using local storage and
modify the dataset on the html div. So those functions could be moved
outside of the on load event. I don't mind making the merge request for it
just wanted to get opinions on it.
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:2>
Django
-------------------------------------+-------------------------------------
Reporter: M.Eng. Thomas | Owner: nobody
Feldmann |
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* cc: Sarah Abderemane (added)
* type: Bug => Cleanup/optimization
* stage: Unreviewed => Accepted
Comment:
Thanks for details, tentatively accepted.
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:3>
Django
-------------------------------------+-------------------------------------
Feldmann | Lowe
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nobody => Spencer Lowe
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: M.Eng. Thomas | Owner: Spencer
Feldmann | Lowe
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Sarah Abderemane):
Yes, I changed the code to avoid that on djangoproject.com but I forgot to
make the change also on Django for the admin.
Feel free to make the changes, I'm happy to review it :)
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:5>
Django
-------------------------------------+-------------------------------------
Reporter: M.Eng. Thomas | Owner: Spencer
Feldmann | Lowe
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by thebugcollector):
Since it's been 3 months, I'm happy submit the initial PR.
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: M.Eng. Thomas | Owner: Spencer
Feldmann | Lowe
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Nicolas Lupien):
I had this problem too, I fixed it this way
[https://github.com/django/django/pull/17625 PR ]
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: M.Eng. Thomas | Owner: Spencer
Feldmann | Lowe
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* has_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:8>
Django
-------------------------------------+-------------------------------------
Feldmann | Lupien
Type: | Status: assigned
Cleanup/optimization |
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: Spencer Lowe => Nicolas Lupien
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:9>
Django
-------------------------------------+-------------------------------------
Type: | Lupien
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:10>
Django
-------------------------------------+-------------------------------------
Reporter: Thomas Feldmann | Owner: Nicolas
Type: | Lupien
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
Has patch: 1 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* needs_better_patch: 0 => 1
* stage: Ready for checkin => Accepted
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:11>
Django
-------------------------------------+-------------------------------------
Reporter: Thomas Feldmann | Owner: Nicolas
Type: | Lupien
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution:
| checkin
Has patch: 1 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* needs_better_patch: 1 => 0
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:12>
Django
-------------------------------------+-------------------------------------
Reporter: Thomas Feldmann | Owner: Nicolas
Type: | Lupien
Component: contrib.admin | Version: 4.2
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"561e16d6a7f07d8cadbdb6c72c68934dcd087d18" 561e16d]:
{{{
#!CommitTicketReference repository=""
revision="561e16d6a7f07d8cadbdb6c72c68934dcd087d18"
Fixed #34670 -- Improved loading of theme in admin.
Thanks Sarah Abderemane for the review.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34670#comment:13>