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?
-
1I wonder why these admin themes are influencing my main page that has nothing to do with admin. – Soerendip Aug 26 '21 at 20:24
-
1Same problem. I am having a already da dark mode theme generator running. Now, the only page that appears bright is the django admin page.... – Soerendip Dec 17 '21 at 22:12
-
1The setting for this is in windows settings (if on windows), Settings -> Personalize -> Colors – Jordan Renaud Feb 16 '22 at 07:50
5 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.

- 31,030
- 3
- 31
- 50
-
check how it looks in the light scheme: https://stackoverflow.com/questions/57606960/how-can-i-emulate-prefers-color-scheme-media-query-in-chrome – obotezat Jun 21 '21 at 13:07
-
This switches off my dark theme tool, and all the admin pages appear bright. – Soerendip Dec 17 '21 at 22:10
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.

- 1,134
- 14
- 30
-
9Note that as of django 4.1 (release 2022) these styles are moved to their own style sheet. For django 4.1+, to turn off the dark-mode styles all you need to do is add `{% block dark-mode-vars %}{% endblock %}`. That way the line that loads the dark-mode style sheet won't be included. – tim-mccurrach Oct 30 '21 at 23:56
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.
For those who would like to have a nice switch between dark and light mode.
This feature will come in Django 4.2 (scheduled April 2023) but I've amended Sarah Abderamane's PR to work in 4.1.
Do the following to activate it:
- Add a file
admin/color_theme_dark_mode.html
to yourtemplates
directory:
<style>
html[data-theme="light"],
: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);
}
html[data-theme="dark"] {
--primary: #264b5d;
--primary-fg: #f7f7f7;
--body-fg: #eeeeee;
--body-bg: #121212;
--body-quiet-color: #e0e0e0;
--body-loud-color: #ffffff;
--breadcrumbs-link-fg: #e0e0e0;
--breadcrumbs-bg: var(--primary);
--link-fg: #81d4fa;
--link-hover-color: #4ac1f7;
--link-selected-fg: #6f94c6;
--hairline-color: #272727;
--border-color: #353535;
--error-fg: #e35f5f;
--message-success-bg: #006b1b;
--message-warning-bg: #583305;
--message-error-bg: #570808;
--darkened-bg: #212121;
--selected-bg: #1b1b1b;
--selected-row: #00363a;
--close-button-bg: #333333;
--close-button-hover-bg: #666666;
}
/* THEME SWITCH */
.theme-toggle {
cursor: pointer;
border: none;
padding: 0;
background: transparent;
vertical-align: middle;
margin-left: 5px;
margin-top: -1px;
}
.theme-toggle svg {
vertical-align: middle;
height: 1rem;
width: 1rem;
display: none;
}
/* ICONS */
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
fill: var(--header-link-color);
color: var(--header-bg);
}
html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
display: block;
}
html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
display: block;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
color: var(--body-fg);
background-color: var(--body-bg);
}
</style>
<script>
// Avoid flashes of a light theme.
const currentTheme = localStorage.getItem("theme");
document.documentElement.dataset.theme = currentTheme || "auto";
window.addEventListener("load", function (e) {
function setTheme(mode) {
if (mode !== "light" && mode !== "dark" && mode !== "auto") {
console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`);
mode = "auto";
}
if (mode === "auto") {
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
mode = prefersDark ? "dark" : "light";
}
document.documentElement.dataset.theme = mode;
localStorage.setItem("theme", mode);
}
function cycleTheme() {
const currentTheme = localStorage.getItem("theme");
if (currentTheme) currentTheme === "light" ? setTheme("dark") : setTheme("light");
else setTheme("auto"); // resets to the system theme
}
function initTheme() {
// set theme defined in localStorage if there is one, or fallback
// to system mode
const currentTheme = localStorage.getItem("theme");
currentTheme ? setTheme(currentTheme) : setTheme("auto");
}
function setupTheme() {
// Attach event handlers for toggling themes
const buttons = document.getElementsByClassName("theme-toggle");
Array.from(buttons).forEach((btn) => {
btn.addEventListener("click", cycleTheme);
});
initTheme();
}
setupTheme();
});
</script>
- Add a file
admin/color_theme_toggle.html
to yourtemplates
directory:
<button class="theme-toggle">
<div class="visually-hidden">Toggle light / dark color theme</div>
<svg class="theme-icon-when-dark">
<use xlink:href="#icon-moon" />
</svg>
<svg class="theme-icon-when-light">
<use xlink:href="#icon-sun" />
</svg>
</button>
<!-- SVGs -->
<div style="display: none">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 24 24" width="16" height="16" id="icon-auto">
<path d="M0 0h24v24H0z" fill="currentColor" />
<path
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"
/>
</symbol>
<symbol viewBox="0 0 24 24" width="16" height="16" id="icon-moon">
<path d="M0 0h24v24H0z" fill="currentColor" />
<path
d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"
/>
</symbol>
<symbol viewBox="0 0 24 24" width="16" height="16" id="icon-sun">
<path d="M0 0h24v24H0z" fill="currentColor" />
<path
d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"
/>
</symbol>
</svg>
</div>
<!-- END SVGs -->
- Add the following to the
base.html
file in yourtemplates
directory:
{% block dark-mode-vars %}
{{ block.super }}
{% include "admin/color_theme_dark_mode.html" %}
{% endblock %}
{% block userlinks %}
{{ block.super }}
{% include "admin/color_theme_toggle.html" %}
{% endblock %}

- 1,994
- 3
- 13
- 11
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)

- 76
- 2
-
Where should this `admin/base.html` file be? I tried in an app template folder (`myproject/myapp/templates/admin/base.html`), I tried [overriding the defalt admin site][1], but I didn't manage to get it working. Thank you! [1]: https://docs.djangoproject.com/en/3.2/ref/contrib/admin/#overriding-the-default-admin-site – pongi Apr 27 '21 at 16:03