How to Change Django Admin Color Scheme (Light & Dark Themes)

John on July 15, 2021

To change the color scheme of the Django admin panel we need to override the base admin template then include CSS rules to replace the original styling.

In the root of your project source files create a directory called templates. From the command like you can use the mkdir command like this:

mkdir templates

Now cd into that directory and create another called admin and inside admin create a base.html file.

mkdir admin

Create a base.html file inside the admin directory use the following code:

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

{% block extrahead %}{{ block.super }}
<style>

@media (prefers-color-scheme: dark) {

  :root {
      --primary: #264b5d;
      --primary-fg: #eee;
      --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;
  }
}

@media (prefers-color-scheme: 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;
      --selected-bg: #e4e4e4;
      --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;
      --close-button-hover-bg: #747474;
      --delete-button-bg: #ba2121;
      --delete-button-hover-bg: #a41515;
  }
}
</style>
{% endblock %}

The prefers-color-scheme media query was introduced in Django 3.2 and is used to provide a dark or light theme depending on the color scheme in the users browser.

Now you can edit the hex values of the above CSS properties to change the color of your admin panel.