Context Navigation

← Previous Ticket
Next Ticket →

#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:	new → closed

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:	closed → new

I have been able to replicate this on a fresh install (see latest video)

How to replicate:

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
Force Django Admin to light mode
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.