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

Asked By: ajinzrathod

||
Source

Answers:

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 By: Sina

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:

  1. 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
  2. Comment or delete all the code of prefers-color-scheme: dark. It would look something like this.
@media (prefers-color-scheme: dark) {
  :root {
      /* code */
}
  1. 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.

Answered By: ajinzrathod

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

Answered By: shacker

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 By: David M.