#34670 closed Cleanup/optimization (fixed)

Django Admin light theme flickers on dark system

Reported by: Thomas Feldmann Owned by: Nicolas Lupien
Component: contrib.admin Version: 4.2
Severity: Normal Keywords:
Cc: Sarah Abderemane Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

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.

Attachments (2)

Django Flickering.mp4 (126.3 KB ) - added by Thomas Feldmann 17 months ago.
A video of the problem
django-flash(2).mp4 (173.6 KB ) - added by Spencer Lowe 16 months ago.

Download all attachments as: .zip

Change History (15)

by Thomas Feldmann, 17 months ago

Attachment: Django Flickering.mp4 added

A video of the problem

comment:1 by Mariusz Felisiak, 17 months ago

Resolution: needsinfo
Status: newclosed

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.

by Spencer Lowe, 16 months ago

Attachment: django-flash(2).mp4 added

comment:2 by Spencer Lowe, 16 months ago

Resolution: needsinfo
Status: closednew

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.

comment:3 by Mariusz Felisiak, 16 months ago

Cc: Sarah Abderemane added
Triage Stage: UnreviewedAccepted
Type: BugCleanup/optimization

Thanks for details, tentatively accepted.

comment:4 by Spencer Lowe, 16 months ago

Owner: changed from nobody to Spencer Lowe
Status: newassigned

comment:5 by Sarah Abderemane, 16 months ago

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 :)

comment:6 by thebugcollector, 13 months ago

Since it's been 3 months, I'm happy submit the initial PR.

comment:7 by Nicolas Lupien, 11 months ago

I had this problem too, I fixed it this way PR

comment:8 by Nicolas Lupien, 11 months ago

Has patch: set

comment:9 by Mariusz Felisiak, 11 months ago

Owner: changed from Spencer Lowe to Nicolas Lupien

comment:10 by Mariusz Felisiak, 11 months ago

Triage Stage: AcceptedReady for checkin

comment:11 by Mariusz Felisiak, 10 months ago

Patch needs improvement: set
Triage Stage: Ready for checkinAccepted

comment:12 by Mariusz Felisiak, 10 months ago

Patch needs improvement: unset
Triage Stage: AcceptedReady for checkin

comment:13 by GitHub <noreply@…>, 10 months ago

Resolution: fixed
Status: assignedclosed

In 561e16d:

Fixed #34670 -- Improved loading of theme in admin.

Thanks Sarah Abderemane for the review.

Note: See TracTickets for help on using tickets.
Back to Top