Can someone explain to my why my django admin theme is dark?

Question

I host my small project on pythonanywhere and after i host it i check if it is working and when i click the django admin, the theme of my django admin is dark and when i tried to run on my local host the theme is white so i tried to double check my static url and i think it is fine and btw this is my static url for my admin Static Url: /static/admin, Static Directory: /home/k3v1nSocialProject/.virtualenvs/myprojenv/lib/python3.8/site-packages/django/contrib/admin/static/admin. Can someone explain to me what is happening and why is my django admin theme is dark?

Answer 1

From django 3.2 we have possibility to adjust admin themes. Fastest way to ignore Dark theme is:

Create admin folder inside your templates folder, then create file base.html

templates/admin/base.html

copy this code into base.html

{% extends 'admin/base.html' %}

{% block extrahead %}{{ block.super }}
<style>
/* VARIABLE DEFINITIONS */
:root {
  --primary: #79aec8;
  --secondary: #417690;
  --accent: #f5dd5d;
  --primary-fg: #fff;

  --body-fg: #333;
  --body-bg: #fff;
  --body-quiet-color: #666;
  --body-loud-color: #000;

  --header-color: #ffc;
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);

  --breadcrumbs-fg: #c4dce8;
  --breadcrumbs-link-fg: var(--body-bg);
  --breadcrumbs-bg: var(--primary);

  --link-fg: #447e9b;
  --link-hover-color: #036;
  --link-selected-fg: #5b80b2;

  --hairline-color: #e8e8e8;
  --border-color: #ccc;

  --error-fg: #ba2121;

  --message-success-bg: #dfd;
  --message-warning-bg: #ffc;
  --message-error-bg: #ffefef;

  --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
  --selected-bg: #e4e4e4; /* E.g. selected table cells */
  --selected-row: #ffc;

  --button-fg: #fff;
  --button-bg: var(--primary);
  --button-hover-bg: #609ab6;
  --default-button-bg: var(--secondary);
  --default-button-hover-bg: #205067;
  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);
}


</style>
{% endblock %}

Now you should have original colors back.

Answer 2

As part of the Django 3.2 release, the admin now has a dark theme that is applied based on a prefers-color-scheme media query. Release Notes

The admin now supports theming, and includes a dark theme that is enabled according to browser settings. See Theming support for more details.

Answer 3

To those wondering where to put this override data from Adam's response above, it would depend on where your TEMPLATES DIRS are assigned in the settings file. For example:

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [(os.path.join(BASE_DIR, 'templates')),], # <- Template path to put the html file
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Note the DIRS directory. This translates to a templates folder at the same level as my manage.py file.

Inside that templates folder i have another folder called admin and an html file called base. So it looks like this: \projectname\templates\admin\base.html

Then in the base.html file i have the code Adam mentions from the documentation theming support

{% extends 'admin/base.html' %}
    
{% block extrahead %}{{ block.super }}
<style>
    :root {
        --primary: #9774d5;
        --secondary: #785cab;
        --link-fg: #7c449b;
        --link-selected-fg: #8f5bb2;
        --body-fg: #333;
        --body-bg: #fff;
        --body-quiet-color: #666;
        --body-loud-color: #000;
        --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
        --selected-bg: #e4e4e4; /* E.g. selected table cells */
        --selected-row: #ffc;
    }

</style>
{% endblock %}

This should now work for you. If you use these exact settings here, it will be a light theme with purple. Then you can just accordingly.

Answer 4

Django 3.2 admin theme change

If you want to return old theme as i did you can just override color variables.

Go to django/contrib/admin/static/admin/css/base.css and copy block that looks like this

/* VARIABLE DEFINITIONS */
:root {
  --primary: #79aec8;
  --secondary: #417690;  
  .......
}

Next create folder named admin in templates folder and create base.html file inside and place this code. Make sure that you replace :root with variables that you got from initial base.html

{% extends 'admin/base.html' %}
    
{% block extrahead %}{{ block.super }}
<style>
    :root {
      --primary: #79aec8;
      --secondary: #417690;
      --accent: #f5dd5d;
      --primary-fg: #fff;
      ......
    }

</style>
{% endblock %}

And enjoy old beautiful look of Django that we all like)