[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.

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:

1. Add a file admin/color_theme_dark_mode.html to your templates 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>

2. Add a file admin/color_theme_toggle.html to your templates 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 -->

3. Add the following to the base.html file in your templates 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 %}

3. Enjoy a new icon at top right to switch between light/dark (I removed "auto" to simplify it a bit):
   

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)