disable dark mode in django admin

Question

The Problem

I installed Django after couple of months. Current version is 3.2.4.

Earlier Django-admin was just light-mode. Current Django-admin switches automatically to dark or light according to system theme. Well, I do not want this behaviour. I want Django-admin to be light theme irrespective of system theme. I am Not using 3rd party theme for Django-admin.

What I Tried?

As per one of the comment in this answer,

I decided to comment "@media (prefers-color-scheme: dark)" section in /static/admin/css/base.css . Not sure that it's good solution but the fastest one.

I tried commenting the code as shown here but does not work. I tried clearing cache and even tried switching browser but none of them seems to work. In browsers, I always prefer light theme. How can I achieve this? Any help is appreciable. Thanks in advance :)

System Details:

OS: Fedora 5.11.12-300.fc34.x86_64

Python-Verion: 3.9.5

You want to disable it for your own experience or the entire application users? — Sina, Jun 28 '21 at 08:50
Actually, I wanna do it for everyone. But even if it solves only for me, that will work too. — ajinzrathod, Jun 28 '21 at 09:13

score 2 · Answer 1 · answered Feb 22 '23 at 01:14

2

As of version 4.1 of Django, the proper solution seems to override a block in the admin/site.html template with empty content:

{% block dark-mode-vars %}{% endblock %}

This removes the dark-mode specific CSS links from the page.

Documented here.

answered Feb 22 '23 at 01:14

David M.

2,602
1
15
15

score 0 · Answer 2 · answered Jun 28 '21 at 09:34

0

Unfortunately at the moment there is no feature toggle for disabling this behavior (django 3.2). in order only to have the light theme, you should delete the entire block of @media (prefers-color-scheme: dark) code from django/contrib/admin/static/admin/css/base.css file. or you can disable prefers-color-scheme: dark from your browser rendering options. instructions for chrome are described in here

answered Jun 28 '21 at 09:34

Sina

1,055
11
24

1

Deleting the entire block does not work. I have also written in question **I tried commenting the code as shown here but does not work.** I am firefox user. Anyways, thanks for this too :) – ajinzrathod Jun 28 '21 at 10:53

ajinzrathod · Accepted Answer · 2021-12-03T02:39:16.260

1st way: The fastest way is to go to your OS Settings and change from your theme from Dark to Light. If you are using Linux, you might need gnome-tweaks to switch between themes.

2nd way:

Let us consider that you are using a virtual environment named venv. Now goto the following directory venv/Lib/site-packages/django/contrib/admin/static/admin/css/base.css
Comment or delete all the code of prefers-color-scheme: dark. It would look something like this.

@media (prefers-color-scheme: dark) {
  :root {
      /* code */
}

Now if you have also executed python manage.py collectstatic and let us assume that your static folder name is static/. Comment all the code of prefers-color-scheme: dark from the following file too: /static/admin/css/base.css

Note: Sometimes browser stores the CSS files in cache memory. To hard reload all the CSS files, hard reload the admin page using Ctrl + Shift + R.

score 0 · Answer 4 · answered Feb 10 '22 at 18:50

The accepted answer only fixes it for the current user. A solution that would fix it for all users of the site would be similar, but would require copying base.css to your static/css directory and editing it there.

Alternatively (and this is what I did), just pip install django-light and add it to your INSTALLED_APPS just before django.contrib.admin

disable dark mode in django admin

The Problem

What I Tried?

System Details:

4 Answers4