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

Viewed 11467

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?

This is the actual photo of django admin dark theme

4 Answers

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.

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.

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.

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)

Related