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

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


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.


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)